From 1942f11d5ee6926ad93dc1b79fae18325ba5de18 Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Tue, 23 Jun 2020 14:49:20 +0200
Subject: Lazy load all routes

---
 .../shared/i18n-primeng-calendar.service.ts        |  94 ---
 .../shared/video-caption-add-modal.component.html  |  47 --
 .../shared/video-caption-add-modal.component.scss  |  20 -
 .../shared/video-caption-add-modal.component.ts    |  85 ---
 .../+video-edit/shared/video-edit.component.html   | 280 --------
 .../+video-edit/shared/video-edit.component.scss   | 197 ------
 .../+video-edit/shared/video-edit.component.ts     | 274 --------
 .../videos/+video-edit/shared/video-edit.module.ts |  38 -
 .../video-add-components/drag-drop.directive.ts    |  30 -
 .../video-import-torrent.component.html            |  76 --
 .../video-import-torrent.component.scss            |  18 -
 .../video-import-torrent.component.ts              | 147 ----
 .../video-import-url.component.html                |  72 --
 .../video-import-url.component.ts                  | 178 -----
 .../video-add-components/video-send.scss           |  46 --
 .../+video-edit/video-add-components/video-send.ts |  71 --
 .../video-upload.component.html                    |  90 ---
 .../video-upload.component.scss                    |  49 --
 .../video-add-components/video-upload.component.ts | 306 --------
 .../videos/+video-edit/video-add-routing.module.ts |  20 -
 .../videos/+video-edit/video-add.component.html    |  46 --
 .../videos/+video-edit/video-add.component.scss    |  89 ---
 .../app/videos/+video-edit/video-add.component.ts  |  77 --
 .../src/app/videos/+video-edit/video-add.module.ts |  32 -
 .../+video-edit/video-update-routing.module.ts     |  24 -
 .../videos/+video-edit/video-update.component.html |  22 -
 .../videos/+video-edit/video-update.component.ts   | 155 ----
 .../app/videos/+video-edit/video-update.module.ts  |  26 -
 .../videos/+video-edit/video-update.resolver.ts    |  44 --
 .../comment/video-comment-add.component.html       |  56 --
 .../comment/video-comment-add.component.scss       |  82 ---
 .../comment/video-comment-add.component.ts         | 149 ----
 .../comment/video-comment-thread-tree.model.ts     |   7 -
 .../comment/video-comment.component.html           |  95 ---
 .../comment/video-comment.component.scss           | 189 -----
 .../comment/video-comment.component.ts             | 131 ----
 .../+video-watch/comment/video-comment.model.ts    |  48 --
 .../+video-watch/comment/video-comment.service.ts  | 149 ----
 .../comment/video-comments.component.html          |  98 ---
 .../comment/video-comments.component.scss          |  53 --
 .../comment/video-comments.component.ts            | 232 ------
 .../+video-watch/modal/video-share.component.html  | 187 -----
 .../+video-watch/modal/video-share.component.scss  |  79 ---
 .../+video-watch/modal/video-share.component.ts    | 126 ----
 .../modal/video-support.component.html             |  15 -
 .../modal/video-support.component.scss             |   3 -
 .../+video-watch/modal/video-support.component.ts  |  29 -
 .../timestamp-route-transformer.directive.ts       |  39 -
 .../+video-watch/video-duration-formatter.pipe.ts  |  28 -
 .../video-watch-playlist.component.html            |  46 --
 .../video-watch-playlist.component.scss            |  83 ---
 .../+video-watch/video-watch-playlist.component.ts | 201 ------
 .../+video-watch/video-watch-routing.module.ts     |  27 -
 .../videos/+video-watch/video-watch.component.html | 277 --------
 .../videos/+video-watch/video-watch.component.scss | 607 ----------------
 .../videos/+video-watch/video-watch.component.ts   | 782 ---------------------
 .../app/videos/+video-watch/video-watch.module.ts  |  65 --
 client/src/app/videos/index.ts                     |   1 -
 .../recent-videos-recommendation.service.ts        |  82 ---
 .../recommendations/recommendation-info.model.ts   |   4 -
 .../recommendations/recommendations.module.ts      |  32 -
 .../recommendations/recommendations.service.ts     |   7 -
 .../recommended-videos.component.html              |  24 -
 .../recommended-videos.component.scss              |  31 -
 .../recommended-videos.component.ts                |  91 ---
 .../recommendations/recommended-videos.store.ts    |  37 -
 client/src/app/videos/video-list/index.ts          |   5 -
 client/src/app/videos/video-list/overview/index.ts |   3 -
 .../videos/video-list/overview/overview.service.ts |  78 --
 .../overview/video-overview.component.html         |  52 --
 .../overview/video-overview.component.scss         |  16 -
 .../overview/video-overview.component.ts           |  94 ---
 .../video-list/overview/videos-overview.model.ts   |  20 -
 .../app/videos/video-list/video-local.component.ts |  86 ---
 .../video-list/video-most-liked.component.ts       |  70 --
 .../video-list/video-recently-added.component.ts   |  74 --
 .../videos/video-list/video-trending.component.ts  |  87 ---
 .../video-user-subscriptions.component.ts          |  75 --
 client/src/app/videos/videos-routing.module.ts     | 125 ----
 client/src/app/videos/videos.component.ts          |   6 -
 client/src/app/videos/videos.module.ts             |  44 --
 81 files changed, 7680 deletions(-)
 delete mode 100644 client/src/app/videos/+video-edit/shared/i18n-primeng-calendar.service.ts
 delete mode 100644 client/src/app/videos/+video-edit/shared/video-caption-add-modal.component.html
 delete mode 100644 client/src/app/videos/+video-edit/shared/video-caption-add-modal.component.scss
 delete mode 100644 client/src/app/videos/+video-edit/shared/video-caption-add-modal.component.ts
 delete mode 100644 client/src/app/videos/+video-edit/shared/video-edit.component.html
 delete mode 100644 client/src/app/videos/+video-edit/shared/video-edit.component.scss
 delete mode 100644 client/src/app/videos/+video-edit/shared/video-edit.component.ts
 delete mode 100644 client/src/app/videos/+video-edit/shared/video-edit.module.ts
 delete mode 100644 client/src/app/videos/+video-edit/video-add-components/drag-drop.directive.ts
 delete mode 100644 client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.html
 delete mode 100644 client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.scss
 delete mode 100644 client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.ts
 delete mode 100644 client/src/app/videos/+video-edit/video-add-components/video-import-url.component.html
 delete mode 100644 client/src/app/videos/+video-edit/video-add-components/video-import-url.component.ts
 delete mode 100644 client/src/app/videos/+video-edit/video-add-components/video-send.scss
 delete mode 100644 client/src/app/videos/+video-edit/video-add-components/video-send.ts
 delete mode 100644 client/src/app/videos/+video-edit/video-add-components/video-upload.component.html
 delete mode 100644 client/src/app/videos/+video-edit/video-add-components/video-upload.component.scss
 delete mode 100644 client/src/app/videos/+video-edit/video-add-components/video-upload.component.ts
 delete mode 100644 client/src/app/videos/+video-edit/video-add-routing.module.ts
 delete mode 100644 client/src/app/videos/+video-edit/video-add.component.html
 delete mode 100644 client/src/app/videos/+video-edit/video-add.component.scss
 delete mode 100644 client/src/app/videos/+video-edit/video-add.component.ts
 delete mode 100644 client/src/app/videos/+video-edit/video-add.module.ts
 delete mode 100644 client/src/app/videos/+video-edit/video-update-routing.module.ts
 delete mode 100644 client/src/app/videos/+video-edit/video-update.component.html
 delete mode 100644 client/src/app/videos/+video-edit/video-update.component.ts
 delete mode 100644 client/src/app/videos/+video-edit/video-update.module.ts
 delete mode 100644 client/src/app/videos/+video-edit/video-update.resolver.ts
 delete mode 100644 client/src/app/videos/+video-watch/comment/video-comment-add.component.html
 delete mode 100644 client/src/app/videos/+video-watch/comment/video-comment-add.component.scss
 delete mode 100644 client/src/app/videos/+video-watch/comment/video-comment-add.component.ts
 delete mode 100644 client/src/app/videos/+video-watch/comment/video-comment-thread-tree.model.ts
 delete mode 100644 client/src/app/videos/+video-watch/comment/video-comment.component.html
 delete mode 100644 client/src/app/videos/+video-watch/comment/video-comment.component.scss
 delete mode 100644 client/src/app/videos/+video-watch/comment/video-comment.component.ts
 delete mode 100644 client/src/app/videos/+video-watch/comment/video-comment.model.ts
 delete mode 100644 client/src/app/videos/+video-watch/comment/video-comment.service.ts
 delete mode 100644 client/src/app/videos/+video-watch/comment/video-comments.component.html
 delete mode 100644 client/src/app/videos/+video-watch/comment/video-comments.component.scss
 delete mode 100644 client/src/app/videos/+video-watch/comment/video-comments.component.ts
 delete mode 100644 client/src/app/videos/+video-watch/modal/video-share.component.html
 delete mode 100644 client/src/app/videos/+video-watch/modal/video-share.component.scss
 delete mode 100644 client/src/app/videos/+video-watch/modal/video-share.component.ts
 delete mode 100644 client/src/app/videos/+video-watch/modal/video-support.component.html
 delete mode 100644 client/src/app/videos/+video-watch/modal/video-support.component.scss
 delete mode 100644 client/src/app/videos/+video-watch/modal/video-support.component.ts
 delete mode 100644 client/src/app/videos/+video-watch/timestamp-route-transformer.directive.ts
 delete mode 100644 client/src/app/videos/+video-watch/video-duration-formatter.pipe.ts
 delete mode 100644 client/src/app/videos/+video-watch/video-watch-playlist.component.html
 delete mode 100644 client/src/app/videos/+video-watch/video-watch-playlist.component.scss
 delete mode 100644 client/src/app/videos/+video-watch/video-watch-playlist.component.ts
 delete mode 100644 client/src/app/videos/+video-watch/video-watch-routing.module.ts
 delete mode 100644 client/src/app/videos/+video-watch/video-watch.component.html
 delete mode 100644 client/src/app/videos/+video-watch/video-watch.component.scss
 delete mode 100644 client/src/app/videos/+video-watch/video-watch.component.ts
 delete mode 100644 client/src/app/videos/+video-watch/video-watch.module.ts
 delete mode 100644 client/src/app/videos/index.ts
 delete mode 100644 client/src/app/videos/recommendations/recent-videos-recommendation.service.ts
 delete mode 100644 client/src/app/videos/recommendations/recommendation-info.model.ts
 delete mode 100644 client/src/app/videos/recommendations/recommendations.module.ts
 delete mode 100644 client/src/app/videos/recommendations/recommendations.service.ts
 delete mode 100644 client/src/app/videos/recommendations/recommended-videos.component.html
 delete mode 100644 client/src/app/videos/recommendations/recommended-videos.component.scss
 delete mode 100644 client/src/app/videos/recommendations/recommended-videos.component.ts
 delete mode 100644 client/src/app/videos/recommendations/recommended-videos.store.ts
 delete mode 100644 client/src/app/videos/video-list/index.ts
 delete mode 100644 client/src/app/videos/video-list/overview/index.ts
 delete mode 100644 client/src/app/videos/video-list/overview/overview.service.ts
 delete mode 100644 client/src/app/videos/video-list/overview/video-overview.component.html
 delete mode 100644 client/src/app/videos/video-list/overview/video-overview.component.scss
 delete mode 100644 client/src/app/videos/video-list/overview/video-overview.component.ts
 delete mode 100644 client/src/app/videos/video-list/overview/videos-overview.model.ts
 delete mode 100644 client/src/app/videos/video-list/video-local.component.ts
 delete mode 100644 client/src/app/videos/video-list/video-most-liked.component.ts
 delete mode 100644 client/src/app/videos/video-list/video-recently-added.component.ts
 delete mode 100644 client/src/app/videos/video-list/video-trending.component.ts
 delete mode 100644 client/src/app/videos/video-list/video-user-subscriptions.component.ts
 delete mode 100644 client/src/app/videos/videos-routing.module.ts
 delete mode 100644 client/src/app/videos/videos.component.ts
 delete mode 100644 client/src/app/videos/videos.module.ts

(limited to 'client/src/app/videos')

diff --git a/client/src/app/videos/+video-edit/shared/i18n-primeng-calendar.service.ts b/client/src/app/videos/+video-edit/shared/i18n-primeng-calendar.service.ts
deleted file mode 100644
index b05852ff8..000000000
--- a/client/src/app/videos/+video-edit/shared/i18n-primeng-calendar.service.ts
+++ /dev/null
@@ -1,94 +0,0 @@
-import { I18n } from '@ngx-translate/i18n-polyfill'
-import { Injectable } from '@angular/core'
-
-@Injectable()
-export class I18nPrimengCalendarService {
-  private readonly calendarLocale: any = {}
-
-  constructor (private i18n: I18n) {
-    this.calendarLocale = {
-      firstDayOfWeek: 0,
-      dayNames: [
-        this.i18n('Sunday'),
-        this.i18n('Monday'),
-        this.i18n('Tuesday'),
-        this.i18n('Wednesday'),
-        this.i18n('Thursday'),
-        this.i18n('Friday'),
-        this.i18n('Saturday')
-      ],
-
-      dayNamesShort: [
-        this.i18n({ value: 'Sun', description: 'Day name short' }),
-        this.i18n({ value: 'Mon', description: 'Day name short' }),
-        this.i18n({ value: 'Tue', description: 'Day name short' }),
-        this.i18n({ value: 'Wed', description: 'Day name short' }),
-        this.i18n({ value: 'Thu', description: 'Day name short' }),
-        this.i18n({ value: 'Fri', description: 'Day name short' }),
-        this.i18n({ value: 'Sat', description: 'Day name short' })
-      ],
-
-      dayNamesMin: [
-        this.i18n({ value: 'Su', description: 'Day name min' }),
-        this.i18n({ value: 'Mo', description: 'Day name min' }),
-        this.i18n({ value: 'Tu', description: 'Day name min' }),
-        this.i18n({ value: 'We', description: 'Day name min' }),
-        this.i18n({ value: 'Th', description: 'Day name min' }),
-        this.i18n({ value: 'Fr', description: 'Day name min' }),
-        this.i18n({ value: 'Sa', description: 'Day name min' })
-      ],
-
-      monthNames: [
-        this.i18n('January'),
-        this.i18n('February'),
-        this.i18n('March'),
-        this.i18n('April'),
-        this.i18n('May'),
-        this.i18n('June'),
-        this.i18n('July'),
-        this.i18n('August'),
-        this.i18n('September'),
-        this.i18n('October'),
-        this.i18n('November'),
-        this.i18n('December')
-      ],
-
-      monthNamesShort: [
-        this.i18n({ value: 'Jan', description: 'Month name short' }),
-        this.i18n({ value: 'Feb', description: 'Month name short' }),
-        this.i18n({ value: 'Mar', description: 'Month name short' }),
-        this.i18n({ value: 'Apr', description: 'Month name short' }),
-        this.i18n({ value: 'May', description: 'Month name short' }),
-        this.i18n({ value: 'Jun', description: 'Month name short' }),
-        this.i18n({ value: 'Jul', description: 'Month name short' }),
-        this.i18n({ value: 'Aug', description: 'Month name short' }),
-        this.i18n({ value: 'Sep', description: 'Month name short' }),
-        this.i18n({ value: 'Oct', description: 'Month name short' }),
-        this.i18n({ value: 'Nov', description: 'Month name short' }),
-        this.i18n({ value: 'Dec', description: 'Month name short' })
-      ],
-
-      today: this.i18n('Today'),
-
-      clear: this.i18n('Clear')
-    }
-  }
-
-  getCalendarLocale () {
-    return this.calendarLocale
-  }
-
-  getTimezone () {
-    const gmt = new Date().toString().match(/([A-Z]+[\+-][0-9]+)/)[1]
-    const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone
-
-    return `${timezone} - ${gmt}`
-  }
-
-  getDateFormat () {
-    return this.i18n({
-      value: 'yy-mm-dd ',
-      description: 'Date format in this locale.'
-    })
-  }
-}
diff --git a/client/src/app/videos/+video-edit/shared/video-caption-add-modal.component.html b/client/src/app/videos/+video-edit/shared/video-caption-add-modal.component.html
deleted file mode 100644
index 6a9e31b5a..000000000
--- a/client/src/app/videos/+video-edit/shared/video-caption-add-modal.component.html
+++ /dev/null
@@ -1,47 +0,0 @@
-<ng-template #modal>
-  <ng-container [formGroup]="form">
-
-    <div class="modal-header">
-      <h4 i18n class="modal-title">Add caption</h4>
-      <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
-    </div>
-
-    <div class="modal-body">
-      <label i18n for="language">Language</label>
-      <div class="peertube-select-container">
-        <select id="language" formControlName="language" class="form-control">
-          <option></option>
-          <option *ngFor="let language of videoCaptionLanguages" [value]="language.id">{{ language.label }}</option>
-        </select>
-      </div>
-
-      <div *ngIf="formErrors.language" class="form-error">
-        {{ formErrors.language }}
-      </div>
-
-      <div class="caption-file">
-        <my-reactive-file
-          formControlName="captionfile" inputName="captionfile" i18n-inputLabel inputLabel="Select the caption file"
-          [extensions]="videoCaptionExtensions" [maxFileSize]="videoCaptionMaxSize" [displayFilename]="true"
-          i18n-ngbTooltip [ngbTooltip]="'(extensions: ' + videoCaptionExtensions.join(', ') + ')'"
-        ></my-reactive-file>
-      </div>
-
-      <div *ngIf="isReplacingExistingCaption()" class="warning-replace-caption" i18n>
-        This will replace an existing caption!
-      </div>
-    </div>
-
-    <div class="modal-footer inputs">
-      <input
-        type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
-        (click)="hide()" (key.enter)="hide()"
-      >
-
-      <input
-        type="submit" i18n-value value="Add this caption" class="action-button-submit"
-        [disabled]="!form.valid" (click)="addCaption()"
-      >
-    </div>
-  </ng-container>
-</ng-template>
diff --git a/client/src/app/videos/+video-edit/shared/video-caption-add-modal.component.scss b/client/src/app/videos/+video-edit/shared/video-caption-add-modal.component.scss
deleted file mode 100644
index b257a16a9..000000000
--- a/client/src/app/videos/+video-edit/shared/video-caption-add-modal.component.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-@import '_variables';
-@import '_mixins';
-
-.peertube-select-container {
-  @include peertube-select-container(auto);
-}
-
-.caption-file {
-  margin-top: 20px;
-  width: max-content;
-
-  ::ng-deep .root {
-    width: max-content;
-  }
-}
-
-.warning-replace-caption {
-  color: red;
-  margin-top: 10px;
-}
\ No newline at end of file
diff --git a/client/src/app/videos/+video-edit/shared/video-caption-add-modal.component.ts b/client/src/app/videos/+video-edit/shared/video-caption-add-modal.component.ts
deleted file mode 100644
index a90d04ce8..000000000
--- a/client/src/app/videos/+video-edit/shared/video-caption-add-modal.component.ts
+++ /dev/null
@@ -1,85 +0,0 @@
-import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core'
-import { ServerService } from '@app/core'
-import { FormReactive, FormValidatorService, VideoCaptionsValidatorsService } from '@app/shared/shared-forms'
-import { VideoCaptionEdit } from '@app/shared/shared-main'
-import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap'
-import { ServerConfig, VideoConstant } from '@shared/models'
-
-@Component({
-  selector: 'my-video-caption-add-modal',
-  styleUrls: [ './video-caption-add-modal.component.scss' ],
-  templateUrl: './video-caption-add-modal.component.html'
-})
-
-export class VideoCaptionAddModalComponent extends FormReactive implements OnInit {
-  @Input() existingCaptions: string[]
-  @Input() serverConfig: ServerConfig
-
-  @Output() captionAdded = new EventEmitter<VideoCaptionEdit>()
-
-  @ViewChild('modal', { static: true }) modal: ElementRef
-
-  videoCaptionLanguages: VideoConstant<string>[] = []
-
-  private openedModal: NgbModalRef
-  private closingModal = false
-
-  constructor (
-    protected formValidatorService: FormValidatorService,
-    private modalService: NgbModal,
-    private serverService: ServerService,
-    private videoCaptionsValidatorsService: VideoCaptionsValidatorsService
-  ) {
-    super()
-  }
-
-  get videoCaptionExtensions () {
-    return this.serverConfig.videoCaption.file.extensions
-  }
-
-  get videoCaptionMaxSize () {
-    return this.serverConfig.videoCaption.file.size.max
-  }
-
-  ngOnInit () {
-    this.serverService.getVideoLanguages()
-        .subscribe(languages => this.videoCaptionLanguages = languages)
-
-    this.buildForm({
-      language: this.videoCaptionsValidatorsService.VIDEO_CAPTION_LANGUAGE,
-      captionfile: this.videoCaptionsValidatorsService.VIDEO_CAPTION_FILE
-    })
-  }
-
-  show () {
-    this.closingModal = false
-
-    this.openedModal = this.modalService.open(this.modal, { centered: true, keyboard: false })
-  }
-
-  hide () {
-    this.closingModal = true
-    this.openedModal.close()
-    this.form.reset()
-  }
-
-  isReplacingExistingCaption () {
-    if (this.closingModal === true) return false
-
-    const languageId = this.form.value[ 'language' ]
-
-    return languageId && this.existingCaptions.indexOf(languageId) !== -1
-  }
-
-  async addCaption () {
-    const languageId = this.form.value[ 'language' ]
-    const languageObject = this.videoCaptionLanguages.find(l => l.id === languageId)
-
-    this.captionAdded.emit({
-      language: languageObject,
-      captionfile: this.form.value[ 'captionfile' ]
-    })
-
-    this.hide()
-  }
-}
diff --git a/client/src/app/videos/+video-edit/shared/video-edit.component.html b/client/src/app/videos/+video-edit/shared/video-edit.component.html
deleted file mode 100644
index c11a60dce..000000000
--- a/client/src/app/videos/+video-edit/shared/video-edit.component.html
+++ /dev/null
@@ -1,280 +0,0 @@
-<div class="video-edit" [formGroup]="form">
-  <div ngbNav #nav="ngbNav" class="nav-tabs">
-
-    <ng-container ngbNavItem>
-      <a ngbNavLink i18n>Basic info</a>
-
-      <ng-template ngbNavContent>
-        <div class="row">
-          <div class="col-video-edit">
-            <div class="form-group">
-              <label i18n for="name">Title</label>
-              <input type="text" id="name" class="form-control" formControlName="name" />
-              <div *ngIf="formErrors.name" class="form-error">
-                {{ formErrors.name }}
-              </div>
-            </div>
-
-            <div class="form-group">
-              <label i18n class="label-tags">Tags</label>
-
-              <my-help>
-                <ng-template ptTemplate="customHtml">
-                  <ng-container i18n>
-                    Tags could be used to suggest relevant recommendations. <br />
-                    There is a maximum of 5 tags. <br />
-                    Press Enter to add a new tag.
-                  </ng-container>
-                </ng-template>
-              </my-help>
-
-              <tag-input
-                [validators]="tagValidators" [errorMessages]="tagValidatorsMessages"
-                i18n-placeholder placeholder="+ Tag" i18n-secondaryPlaceholder secondaryPlaceholder="Enter a new tag"
-                formControlName="tags" [maxItems]="5" [modelAsStrings]="true"
-              ></tag-input>
-            </div>
-
-            <div class="form-group">
-              <label i18n for="description">Description</label>
-
-              <my-help helpType="markdownText">
-                <ng-template ptTemplate="preHtml">
-                  <ng-container i18n>
-                    Video descriptions are truncated by default and require manual action to expand them.
-                  </ng-container>
-                </ng-template>
-              </my-help>
-
-              <my-markdown-textarea [truncate]="250" formControlName="description" [markdownVideo]="true"></my-markdown-textarea>
-
-              <div *ngIf="formErrors.description" class="form-error">
-                {{ formErrors.description }}
-              </div>
-            </div>
-          </div>
-
-          <div class="col-video-edit">
-            <div class="form-group">
-              <label i18n>Channel</label>
-              <div class="peertube-select-container">
-                <select formControlName="channelId" class="form-control">
-                  <option *ngFor="let channel of userVideoChannels" [value]="channel.id">{{ channel.label }}</option>
-                </select>
-              </div>
-            </div>
-
-            <div class="form-group">
-              <label i18n for="category">Category</label>
-              <div class="peertube-select-container">
-                <select id="category" formControlName="category" class="form-control">
-                  <option></option>
-                  <option *ngFor="let category of videoCategories" [value]="category.id">{{ category.label }}</option>
-                </select>
-              </div>
-
-              <div *ngIf="formErrors.category" class="form-error">
-                {{ formErrors.category }}
-              </div>
-            </div>
-
-            <div class="form-group">
-              <label i18n for="licence">Licence</label>
-              <div class="peertube-select-container">
-                <select id="licence" formControlName="licence" class="form-control">
-                  <option></option>
-                  <option *ngFor="let licence of videoLicences" [value]="licence.id">{{ licence.label }}</option>
-                </select>
-              </div>
-
-              <div *ngIf="formErrors.licence" class="form-error">
-                {{ formErrors.licence }}
-              </div>
-            </div>
-
-            <div class="form-group">
-              <label i18n for="language">Language</label>
-              <div class="peertube-select-container">
-                <select id="language" formControlName="language" class="form-control">
-                  <option></option>
-                  <option *ngFor="let language of videoLanguages" [value]="language.id">{{ language.label }}</option>
-                </select>
-              </div>
-
-              <div *ngIf="formErrors.language" class="form-error">
-                {{ formErrors.language }}
-              </div>
-            </div>
-
-            <div class="form-group">
-              <label i18n for="privacy">Privacy</label>
-              <div class="peertube-select-container">
-                <select id="privacy" formControlName="privacy" class="form-control">
-                  <option></option>
-                  <option *ngFor="let privacy of videoPrivacies" [value]="privacy.id">{{ privacy.label }}</option>
-                  <option *ngIf="schedulePublicationPossible" [value]="SPECIAL_SCHEDULED_PRIVACY">Scheduled</option>
-                </select>
-              </div>
-
-              <div *ngIf="formErrors.privacy" class="form-error">
-                {{ formErrors.privacy }}
-              </div>
-            </div>
-
-            <div *ngIf="schedulePublicationEnabled" class="form-group">
-              <label i18n for="schedulePublicationAt">Schedule publication ({{ calendarTimezone }})</label>
-              <p-calendar
-                id="schedulePublicationAt" formControlName="schedulePublicationAt" [dateFormat]="calendarDateFormat"
-                [locale]="calendarLocale" [minDate]="minScheduledDate" [showTime]="true" [hideOnDateTimeSelect]="true"
-              >
-              </p-calendar>
-
-              <div *ngIf="formErrors.schedulePublicationAt" class="form-error">
-                {{ formErrors.schedulePublicationAt }}
-              </div>
-            </div>
-
-            <my-peertube-checkbox inputName="nsfw" formControlName="nsfw" helpPlacement="bottom-right">
-              <ng-template ptTemplate="label">
-                <ng-container i18n>This video contains mature or explicit content</ng-container>
-              </ng-template>
-
-              <ng-template ptTemplate="help">
-                <ng-container i18n>Some instances do not list videos containing mature or explicit content by default.</ng-container>
-              </ng-template>
-            </my-peertube-checkbox>
-
-            <my-peertube-checkbox *ngIf="waitTranscodingEnabled" inputName="waitTranscoding" formControlName="waitTranscoding" helpPlacement="bottom-right">
-              <ng-template ptTemplate="label">
-                <ng-container i18n>Wait transcoding before publishing the video</ng-container>
-              </ng-template>
-
-              <ng-template ptTemplate="help">
-                <ng-container i18n>If you decide not to wait for transcoding before publishing the video, it could be unplayable until transcoding ends.</ng-container>
-              </ng-template>
-            </my-peertube-checkbox>
-
-          </div>
-        </div>
-      </ng-template>
-    </ng-container>
-
-    <ng-container ngbNavItem>
-      <a ngbNavLink i18n>Captions</a>
-
-      <ng-template ngbNavContent>
-        <div class="captions">
-
-          <div class="captions-header">
-            <a (click)="openAddCaptionModal()" class="create-caption">
-              <my-global-icon iconName="add" aria-hidden="true"></my-global-icon>
-              <ng-container i18n>Add another caption</ng-container>
-            </a>
-          </div>
-
-          <div class="form-group" *ngFor="let videoCaption of videoCaptions">
-
-            <div class="caption-entry">
-              <ng-container *ngIf="!videoCaption.action">
-                <a
-                  i18n-title title="See the subtitle file" class="caption-entry-label" target="_blank" rel="noopener noreferrer"
-                  [href]="videoCaption.captionPath"
-                >{{ videoCaption.language.label }}</a>
-
-                <div i18n class="caption-entry-state">Already uploaded	&#10004;</div>
-
-                <span i18n class="caption-entry-delete" (click)="deleteCaption(videoCaption)">Delete</span>
-              </ng-container>
-
-              <ng-container *ngIf="videoCaption.action === 'CREATE'">
-                <span class="caption-entry-label">{{ videoCaption.language.label }}</span>
-
-                <div i18n class="caption-entry-state caption-entry-state-create">Will be created on update</div>
-
-                <span i18n class="caption-entry-delete" (click)="deleteCaption(videoCaption)">Cancel create</span>
-              </ng-container>
-
-              <ng-container *ngIf="videoCaption.action === 'REMOVE'">
-                <span class="caption-entry-label">{{ videoCaption.language.label }}</span>
-
-                <div i18n class="caption-entry-state caption-entry-state-delete">Will be deleted on update</div>
-
-                <span i18n class="caption-entry-delete" (click)="deleteCaption(videoCaption)">Cancel deletion</span>
-              </ng-container>
-            </div>
-          </div>
-
-          <div i18n class="no-caption" *ngIf="videoCaptions?.length === 0">
-            No captions for now.
-          </div>
-
-        </div>
-      </ng-template>
-    </ng-container>
-
-    <ng-container ngbNavItem>
-      <a ngbNavLink i18n>Advanced settings</a>
-
-      <ng-template ngbNavContent>
-        <div class="row advanced-settings">
-          <div class="col-md-12 col-xl-8">
-
-            <div class="form-group">
-              <label i18n for="previewfile">Video preview</label>
-
-              <my-preview-upload
-                i18n-inputLabel inputLabel="Edit" inputName="previewfile" formControlName="previewfile"
-                previewWidth="360px" previewHeight="200px"
-              ></my-preview-upload>
-            </div>
-
-            <div class="form-group">
-              <label i18n for="support">Support</label>
-              <my-help helpType="markdownEnhanced" i18n-preHtml preHtml="Short text to tell people how they can support you (membership platform...)."></my-help>
-              <my-markdown-textarea
-                id="support" formControlName="support" markdownType="enhanced"
-                [classes]="{ 'input-error': formErrors['support'] }"
-              ></my-markdown-textarea>
-              <div *ngIf="formErrors.support" class="form-error">
-                {{ formErrors.support }}
-              </div>
-            </div>
-          </div>
-
-          <div class="col-md-12 col-xl-4">
-            <div class="form-group originally-published-at">
-              <label i18n for="originallyPublishedAt">Original publication date</label>
-              <my-help i18n-preHtml preHtml="This is the date when the content was originally published (e.g. the release date for a film)"></my-help>
-              <p-calendar
-                id="originallyPublishedAt" formControlName="originallyPublishedAt" [dateFormat]="calendarDateFormat"
-                [locale]="calendarLocale" [showTime]="true" [hideOnDateTimeSelect]="true" [monthNavigator]="true" [yearNavigator]="true" [yearRange]="myYearRange"
-              >
-              </p-calendar>
-
-              <div *ngIf="formErrors.originallyPublishedAt" class="form-error">
-                {{ formErrors.originallyPublishedAt }}
-              </div>
-            </div>
-
-            <my-peertube-checkbox
-              inputName="commentsEnabled" formControlName="commentsEnabled"
-              i18n-labelText labelText="Enable video comments"
-            ></my-peertube-checkbox>
-
-            <my-peertube-checkbox
-              inputName="downloadEnabled" formControlName="downloadEnabled"
-              i18n-labelText labelText="Enable download"
-            ></my-peertube-checkbox>
-          </div>
-        </div>
-      </ng-template>
-    </ng-container>
-
-  </div>
-
-  <div [ngbNavOutlet]="nav"></div>
-</div>
-
-<my-video-caption-add-modal
-  #videoCaptionAddModal [existingCaptions]="existingCaptions" [serverConfig]="serverConfig" (captionAdded)="onCaptionAdded($event)"
-></my-video-caption-add-modal>
diff --git a/client/src/app/videos/+video-edit/shared/video-edit.component.scss b/client/src/app/videos/+video-edit/shared/video-edit.component.scss
deleted file mode 100644
index 69b907288..000000000
--- a/client/src/app/videos/+video-edit/shared/video-edit.component.scss
+++ /dev/null
@@ -1,197 +0,0 @@
-// Bootstrap grid utilities require functions, variables and mixins
-@import 'node_modules/bootstrap/scss/functions';
-@import 'node_modules/bootstrap/scss/variables';
-@import 'node_modules/bootstrap/scss/mixins';
-@import 'node_modules/bootstrap/scss/grid';
-
-@import 'variables';
-@import 'mixins';
-
-label {
-  font-weight: $font-regular;
-  font-size: 100%;
-}
-
-.peertube-select-container {
-  @include peertube-select-container(auto);
-}
-
-.title-page a {
-  color: pvar(--mainForegroundColor);
-
-  &:hover {
-    text-decoration: none;
-    opacity: .8;
-  }
-}
-
-my-peertube-checkbox {
-  display: block;
-  margin-bottom: 1rem;
-}
-
-.nav-tabs {
-  margin-bottom: 15px;
-}
-
-.video-edit {
-  height: 100%;
-  min-height: 300px;
-
-  .form-group {
-    margin-bottom: 25px;
-  }
-
-  input {
-    @include peertube-input-text(100%);
-    display: block;
-  }
-
-  .label-tags + span {
-    font-size: 15px;
-  }
-
-  .advanced-settings .form-group {
-    margin-bottom: 20px;
-  }
-}
-
-.captions {
-
-  .captions-header {
-    text-align: right;
-    margin-bottom: 1rem;
-
-    .create-caption {
-      @include create-button;
-    }
-  }
-
-  .caption-entry {
-    display: flex;
-    height: 40px;
-    align-items: center;
-
-    a.caption-entry-label {
-      @include disable-default-a-behaviour;
-
-      flex-grow: 1;
-      color: #000;
-
-      &:hover {
-        opacity: 0.8;
-      }
-    }
-
-    .caption-entry-label {
-      font-size: 15px;
-      font-weight: bold;
-
-      margin-right: 20px;
-      width: 150px;
-    }
-
-    .caption-entry-state {
-      width: 200px;
-
-      &.caption-entry-state-create {
-        color: #39CC0B;
-      }
-
-      &.caption-entry-state-delete {
-        color: #FF0000;
-      }
-    }
-
-    .caption-entry-delete {
-      @include peertube-button;
-      @include grey-button;
-    }
-  }
-
-  .no-caption {
-    text-align: center;
-    font-size: 15px;
-  }
-}
-
-.submit-container {
-  text-align: right;
-
-  .message-submit {
-    display: inline-block;
-    margin-right: 25px;
-
-    color: pvar(--greyForegroundColor);
-    font-size: 15px;
-  }
-
-  .submit-button {
-    @include peertube-button;
-    @include orange-button;
-    @include button-with-icon(20px, 1px);
-
-    display: inline-block;
-
-    input {
-      cursor: inherit;
-      background-color: inherit;
-      border: none;
-      padding: 0;
-      outline: 0;
-      color: inherit;
-      font-weight: $font-semibold;
-    }
-  }
-}
-
-p-calendar {
-  display: block;
-
-  ::ng-deep {
-    input,
-    .ui-calendar {
-      width: 100%;
-    }
-
-    input {
-      @include peertube-input-text(100%);
-      color: #000;
-    }
-  }
-}
-
-@include ng2-tags;
-
-// columns for the video
-.col-video-edit {
-  @include make-col-ready();
-
-  @include media-breakpoint-up(md) {
-    @include make-col(7);
-
-    & + .col-video-edit {
-      @include make-col(5);
-    }
-  }
-
-  @include media-breakpoint-up(xl) {
-    @include make-col(8);
-
-    & + .col-video-edit {
-      @include make-col(4);
-    }
-  }
-}
-
-:host-context(.expanded) {
-  .col-video-edit {
-    @include media-breakpoint-up(md) {
-      @include make-col(8);
-
-      & + .col-video-edit {
-        @include make-col(4);
-      }
-    }
-  }
-}
diff --git a/client/src/app/videos/+video-edit/shared/video-edit.component.ts b/client/src/app/videos/+video-edit/shared/video-edit.component.ts
deleted file mode 100644
index 239e453ad..000000000
--- a/client/src/app/videos/+video-edit/shared/video-edit.component.ts
+++ /dev/null
@@ -1,274 +0,0 @@
-import { map } from 'rxjs/operators'
-import { Component, Input, NgZone, OnDestroy, OnInit, ViewChild } from '@angular/core'
-import { FormArray, FormControl, FormGroup, ValidatorFn, Validators } from '@angular/forms'
-import { ServerService } from '@app/core'
-import { removeElementFromArray } from '@app/helpers'
-import { FormReactiveValidationMessages, FormValidatorService, VideoValidatorsService } from '@app/shared/shared-forms'
-import { VideoCaptionEdit, VideoEdit, VideoService } from '@app/shared/shared-main'
-import { ServerConfig, VideoConstant, VideoPrivacy } from '@shared/models'
-import { I18nPrimengCalendarService } from './i18n-primeng-calendar.service'
-import { VideoCaptionAddModalComponent } from './video-caption-add-modal.component'
-
-@Component({
-  selector: 'my-video-edit',
-  styleUrls: [ './video-edit.component.scss' ],
-  templateUrl: './video-edit.component.html'
-})
-export class VideoEditComponent implements OnInit, OnDestroy {
-  @Input() form: FormGroup
-  @Input() formErrors: { [ id: string ]: string } = {}
-  @Input() validationMessages: FormReactiveValidationMessages = {}
-  @Input() userVideoChannels: { id: number, label: string, support: string }[] = []
-  @Input() schedulePublicationPossible = true
-  @Input() videoCaptions: (VideoCaptionEdit & { captionPath?: string })[] = []
-  @Input() waitTranscodingEnabled = true
-
-  @ViewChild('videoCaptionAddModal', { static: true }) videoCaptionAddModal: VideoCaptionAddModalComponent
-
-  // So that it can be accessed in the template
-  readonly SPECIAL_SCHEDULED_PRIVACY = VideoEdit.SPECIAL_SCHEDULED_PRIVACY
-
-  videoPrivacies: VideoConstant<VideoPrivacy>[] = []
-  videoCategories: VideoConstant<number>[] = []
-  videoLicences: VideoConstant<number>[] = []
-  videoLanguages: VideoConstant<string>[] = []
-
-  tagValidators: ValidatorFn[]
-  tagValidatorsMessages: { [ name: string ]: string }
-
-  schedulePublicationEnabled = false
-
-  calendarLocale: any = {}
-  minScheduledDate = new Date()
-  myYearRange = '1880:' + (new Date()).getFullYear()
-
-  calendarTimezone: string
-  calendarDateFormat: string
-
-  serverConfig: ServerConfig
-
-  private schedulerInterval: any
-  private firstPatchDone = false
-  private initialVideoCaptions: string[] = []
-
-  constructor (
-    private formValidatorService: FormValidatorService,
-    private videoValidatorsService: VideoValidatorsService,
-    private videoService: VideoService,
-    private serverService: ServerService,
-    private i18nPrimengCalendarService: I18nPrimengCalendarService,
-    private ngZone: NgZone
-  ) {
-    this.tagValidators = this.videoValidatorsService.VIDEO_TAGS.VALIDATORS
-    this.tagValidatorsMessages = this.videoValidatorsService.VIDEO_TAGS.MESSAGES
-
-    this.calendarLocale = this.i18nPrimengCalendarService.getCalendarLocale()
-    this.calendarTimezone = this.i18nPrimengCalendarService.getTimezone()
-    this.calendarDateFormat = this.i18nPrimengCalendarService.getDateFormat()
-  }
-
-  get existingCaptions () {
-    return this.videoCaptions
-               .filter(c => c.action !== 'REMOVE')
-               .map(c => c.language.id)
-  }
-
-  updateForm () {
-    const defaultValues: any = {
-      nsfw: 'false',
-      commentsEnabled: 'true',
-      downloadEnabled: 'true',
-      waitTranscoding: 'true',
-      tags: []
-    }
-    const obj: any = {
-      name: this.videoValidatorsService.VIDEO_NAME,
-      privacy: this.videoValidatorsService.VIDEO_PRIVACY,
-      channelId: this.videoValidatorsService.VIDEO_CHANNEL,
-      nsfw: null,
-      commentsEnabled: null,
-      downloadEnabled: null,
-      waitTranscoding: null,
-      category: this.videoValidatorsService.VIDEO_CATEGORY,
-      licence: this.videoValidatorsService.VIDEO_LICENCE,
-      language: this.videoValidatorsService.VIDEO_LANGUAGE,
-      description: this.videoValidatorsService.VIDEO_DESCRIPTION,
-      tags: null,
-      previewfile: null,
-      support: this.videoValidatorsService.VIDEO_SUPPORT,
-      schedulePublicationAt: this.videoValidatorsService.VIDEO_SCHEDULE_PUBLICATION_AT,
-      originallyPublishedAt: this.videoValidatorsService.VIDEO_ORIGINALLY_PUBLISHED_AT
-    }
-
-    this.formValidatorService.updateForm(
-      this.form,
-      this.formErrors,
-      this.validationMessages,
-      obj,
-      defaultValues
-    )
-
-    this.form.addControl('captions', new FormArray([
-      new FormGroup({
-        language: new FormControl(),
-        captionfile: new FormControl()
-      })
-    ]))
-
-    this.trackChannelChange()
-    this.trackPrivacyChange()
-  }
-
-  ngOnInit () {
-    this.updateForm()
-
-    this.serverService.getVideoCategories()
-        .subscribe(res => this.videoCategories = res)
-    this.serverService.getVideoLicences()
-        .subscribe(res => this.videoLicences = res)
-    this.serverService.getVideoLanguages()
-      .subscribe(res => this.videoLanguages = res)
-
-    this.serverService.getVideoPrivacies()
-      .subscribe(privacies => this.videoPrivacies = this.videoService.explainedPrivacyLabels(privacies))
-
-    this.serverConfig = this.serverService.getTmpConfig()
-    this.serverService.getConfig()
-      .subscribe(config => this.serverConfig = config)
-
-    this.initialVideoCaptions = this.videoCaptions.map(c => c.language.id)
-
-    this.ngZone.runOutsideAngular(() => {
-      this.schedulerInterval = setInterval(() => this.minScheduledDate = new Date(), 1000 * 60) // Update every minute
-    })
-  }
-
-  ngOnDestroy () {
-    if (this.schedulerInterval) clearInterval(this.schedulerInterval)
-  }
-
-  onCaptionAdded (caption: VideoCaptionEdit) {
-    const existingCaption = this.videoCaptions.find(c => c.language.id === caption.language.id)
-
-    // Replace existing caption?
-    if (existingCaption) {
-      Object.assign(existingCaption, caption, { action: 'CREATE' as 'CREATE' })
-    } else {
-      this.videoCaptions.push(
-        Object.assign(caption, { action: 'CREATE' as 'CREATE' })
-      )
-    }
-
-    this.sortVideoCaptions()
-  }
-
-  async deleteCaption (caption: VideoCaptionEdit) {
-    // Caption recovers his former state
-    if (caption.action && this.initialVideoCaptions.indexOf(caption.language.id) !== -1) {
-      caption.action = undefined
-      return
-    }
-
-    // This caption is not on the server, just remove it from our array
-    if (caption.action === 'CREATE') {
-      removeElementFromArray(this.videoCaptions, caption)
-      return
-    }
-
-    caption.action = 'REMOVE' as 'REMOVE'
-  }
-
-  openAddCaptionModal () {
-    this.videoCaptionAddModal.show()
-  }
-
-  private sortVideoCaptions () {
-    this.videoCaptions.sort((v1, v2) => {
-      if (v1.language.label < v2.language.label) return -1
-      if (v1.language.label === v2.language.label) return 0
-
-      return 1
-    })
-  }
-
-  private trackPrivacyChange () {
-    // We will update the schedule input and the wait transcoding checkbox validators
-    this.form.controls[ 'privacy' ]
-      .valueChanges
-      .pipe(map(res => parseInt(res.toString(), 10)))
-      .subscribe(
-        newPrivacyId => {
-
-          this.schedulePublicationEnabled = newPrivacyId === this.SPECIAL_SCHEDULED_PRIVACY
-
-          // Value changed
-          const scheduleControl = this.form.get('schedulePublicationAt')
-          const waitTranscodingControl = this.form.get('waitTranscoding')
-
-          if (this.schedulePublicationEnabled) {
-            scheduleControl.setValidators([ Validators.required ])
-
-            waitTranscodingControl.disable()
-            waitTranscodingControl.setValue(false)
-          } else {
-            scheduleControl.clearValidators()
-
-            waitTranscodingControl.enable()
-
-            // Do not update the control value on first patch (values come from the server)
-            if (this.firstPatchDone === true) {
-              waitTranscodingControl.setValue(true)
-            }
-          }
-
-          scheduleControl.updateValueAndValidity()
-          waitTranscodingControl.updateValueAndValidity()
-
-          this.firstPatchDone = true
-
-        }
-      )
-  }
-
-  private trackChannelChange () {
-    // We will update the "support" field depending on the channel
-    this.form.controls[ 'channelId' ]
-      .valueChanges
-      .pipe(map(res => parseInt(res.toString(), 10)))
-      .subscribe(
-        newChannelId => {
-          const oldChannelId = parseInt(this.form.value[ 'channelId' ], 10)
-
-          // Not initialized yet
-          if (isNaN(newChannelId)) return
-          const newChannel = this.userVideoChannels.find(c => c.id === newChannelId)
-          if (!newChannel) return
-
-          // Wait support field update
-          setTimeout(() => {
-            const currentSupport = this.form.value[ 'support' ]
-
-            // First time we set the channel?
-            if (isNaN(oldChannelId) && !currentSupport) return this.updateSupportField(newChannel.support)
-
-            const oldChannel = this.userVideoChannels.find(c => c.id === oldChannelId)
-            if (!newChannel || !oldChannel) {
-              console.error('Cannot find new or old channel.')
-              return
-            }
-
-            // If the current support text is not the same than the old channel, the user updated it.
-            // We don't want the user to lose his text, so stop here
-            if (currentSupport && currentSupport !== oldChannel.support) return
-
-            // Update the support text with our new channel
-            this.updateSupportField(newChannel.support)
-          })
-        }
-      )
-  }
-
-  private updateSupportField (support: string) {
-    return this.form.patchValue({ support: support || '' })
-  }
-}
diff --git a/client/src/app/videos/+video-edit/shared/video-edit.module.ts b/client/src/app/videos/+video-edit/shared/video-edit.module.ts
deleted file mode 100644
index 96061a300..000000000
--- a/client/src/app/videos/+video-edit/shared/video-edit.module.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { TagInputModule } from 'ngx-chips'
-import { CalendarModule } from 'primeng/calendar'
-import { NgModule } from '@angular/core'
-import { SharedFormModule } from '@app/shared/shared-forms'
-import { SharedGlobalIconModule } from '@app/shared/shared-icons'
-import { SharedMainModule } from '@app/shared/shared-main'
-import { VideoCaptionAddModalComponent } from './video-caption-add-modal.component'
-import { VideoEditComponent } from './video-edit.component'
-
-@NgModule({
-  imports: [
-    TagInputModule,
-    CalendarModule,
-
-    SharedMainModule,
-    SharedFormModule,
-    SharedGlobalIconModule
-  ],
-
-  declarations: [
-    VideoEditComponent,
-    VideoCaptionAddModalComponent
-  ],
-
-  exports: [
-    TagInputModule,
-    CalendarModule,
-
-    SharedMainModule,
-    SharedFormModule,
-    SharedGlobalIconModule,
-
-    VideoEditComponent
-  ],
-
-  providers: []
-})
-export class VideoEditModule { }
diff --git a/client/src/app/videos/+video-edit/video-add-components/drag-drop.directive.ts b/client/src/app/videos/+video-edit/video-add-components/drag-drop.directive.ts
deleted file mode 100644
index 7b1a38c62..000000000
--- a/client/src/app/videos/+video-edit/video-add-components/drag-drop.directive.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { Directive, Output, EventEmitter, HostBinding, HostListener } from '@angular/core'
-
-@Directive({
-  selector: '[dragDrop]'
-})
-export class DragDropDirective {
-  @Output() fileDropped = new EventEmitter<FileList>()
-
-  @HostBinding('class.dragover') dragover = false
-
-  @HostListener('dragover', ['$event']) onDragOver (e: Event) {
-    e.preventDefault()
-    e.stopPropagation()
-    this.dragover = true
-  }
-
-  @HostListener('dragleave', ['$event']) public onDragLeave (e: Event) {
-    e.preventDefault()
-    e.stopPropagation()
-    this.dragover = false
-  }
-
-  @HostListener('drop', ['$event']) public ondrop (e: DragEvent) {
-    e.preventDefault()
-    e.stopPropagation()
-    this.dragover = false
-    const files = e.dataTransfer.files
-    if (files.length > 0) this.fileDropped.emit(files)
-  }
-}
diff --git a/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.html b/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.html
deleted file mode 100644
index 7287f799d..000000000
--- a/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.html
+++ /dev/null
@@ -1,76 +0,0 @@
-<div *ngIf="!hasImportedVideo" class="upload-video-container" dragDrop (fileDropped)="setTorrentFile($event)">
-  <div class="first-step-block">
-    <my-global-icon class="upload-icon" iconName="upload" aria-hidden="true"></my-global-icon>
-
-    <div class="button-file form-control" [ngbTooltip]="'(extensions: .torrent)'">
-      <span i18n>Select the torrent to import</span>
-      <input #torrentfileInput type="file" name="torrentfile" id="torrentfile" accept=".torrent" (change)="fileChange()" />
-    </div>
-
-    <div class="torrent-or-magnet" i18n-data-content data-content="OR"></div>
-
-    <div class="form-group form-group-magnet-uri">
-      <label i18n for="magnetUri">Paste magnet URI</label>
-      <my-help>
-        <ng-template ptTemplate="customHtml">
-          <ng-container i18n>
-            You can import any torrent file that points to a mp4 file.
-            You should make sure you have diffusion rights over the content it points to, otherwise it could cause legal trouble to yourself and your instance.
-          </ng-container>
-        </ng-template>
-      </my-help>
-
-      <input type="text" id="magnetUri" [(ngModel)]="magnetUri" class="form-control" />
-    </div>
-
-    <div class="form-group">
-      <label i18n for="first-step-channel">Channel</label>
-      <div class="peertube-select-container">
-        <select id="first-step-channel" [(ngModel)]="firstStepChannelId" class="form-control">
-          <option *ngFor="let channel of userVideoChannels" [value]="channel.id">{{ channel.label }}</option>
-        </select>
-      </div>
-    </div>
-
-    <div class="form-group">
-      <label i18n for="first-step-privacy">Privacy</label>
-      <div class="peertube-select-container">
-        <select id="first-step-privacy" [(ngModel)]="firstStepPrivacyId" class="form-control">
-          <option *ngFor="let privacy of videoPrivacies" [value]="privacy.id">{{ privacy.label }}</option>
-        </select>
-      </div>
-    </div>
-
-    <input
-      type="button" i18n-value value="Import"
-      [disabled]="!isMagnetUrlValid() || isImportingVideo" (click)="importVideo()"
-    />
-  </div>
-</div>
-
-<div *ngIf="error" class="alert alert-danger">
-  <div i18n>Sorry, but something went wrong</div>
-  {{ error }}
-</div>
-
-<div *ngIf="hasImportedVideo && !error" class="alert alert-info" i18n>
-  Congratulations, the video will be imported with BitTorrent! You can already add information about this video.
-</div>
-
-<!-- Hidden because we want to load the component -->
-<form [hidden]="!hasImportedVideo" novalidate [formGroup]="form">
-  <my-video-edit
-    [form]="form" [formErrors]="formErrors" [videoCaptions]="videoCaptions" [schedulePublicationPossible]="false"
-    [validationMessages]="validationMessages" [userVideoChannels]="userVideoChannels"
-  ></my-video-edit>
-
-  <div class="submit-container">
-    <div class="submit-button"
-       (click)="updateSecondStep()"
-       [ngClass]="{ disabled: !form.valid || isUpdatingVideo === true }"
-    >
-      <my-global-icon iconName="validate" aria-hidden="true"></my-global-icon>
-      <input type="button" i18n-value value="Update" />
-    </div>
-  </div>
-</form>
diff --git a/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.scss b/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.scss
deleted file mode 100644
index 1fef74994..000000000
--- a/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-@import 'variables';
-@import 'mixins';
-
-.first-step-block {
-  .torrent-or-magnet {
-    @include divider($color: pvar(--inputPlaceholderColor), $background: pvar(--submenuColor));
-    
-    &[data-content] {
-      margin: 1.5rem 0;
-    }
-  }
-
-  .form-group-magnet-uri {
-    margin-bottom: 40px;
-  }
-}
-
-
diff --git a/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.ts b/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.ts
deleted file mode 100644
index 5b453a1d9..000000000
--- a/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.ts
+++ /dev/null
@@ -1,147 +0,0 @@
-import { Component, ElementRef, EventEmitter, OnInit, Output, ViewChild } from '@angular/core'
-import { Router } from '@angular/router'
-import { AuthService, CanComponentDeactivate, Notifier, ServerService } from '@app/core'
-import { scrollToTop } from '@app/helpers'
-import { FormValidatorService } from '@app/shared/shared-forms'
-import { VideoCaptionService, VideoEdit, VideoImportService, VideoService } from '@app/shared/shared-main'
-import { VideoSend } from '@app/videos/+video-edit/video-add-components/video-send'
-import { LoadingBarService } from '@ngx-loading-bar/core'
-import { I18n } from '@ngx-translate/i18n-polyfill'
-import { VideoPrivacy, VideoUpdate } from '@shared/models'
-
-@Component({
-  selector: 'my-video-import-torrent',
-  templateUrl: './video-import-torrent.component.html',
-  styleUrls: [
-    '../shared/video-edit.component.scss',
-    './video-import-torrent.component.scss',
-    './video-send.scss'
-  ]
-})
-export class VideoImportTorrentComponent extends VideoSend implements OnInit, CanComponentDeactivate {
-  @Output() firstStepDone = new EventEmitter<string>()
-  @Output() firstStepError = new EventEmitter<void>()
-  @ViewChild('torrentfileInput') torrentfileInput: ElementRef<HTMLInputElement>
-
-  magnetUri = ''
-
-  isImportingVideo = false
-  hasImportedVideo = false
-  isUpdatingVideo = false
-
-  video: VideoEdit
-  error: string
-
-  protected readonly DEFAULT_VIDEO_PRIVACY = VideoPrivacy.PUBLIC
-
-  constructor (
-    protected formValidatorService: FormValidatorService,
-    protected loadingBar: LoadingBarService,
-    protected notifier: Notifier,
-    protected authService: AuthService,
-    protected serverService: ServerService,
-    protected videoService: VideoService,
-    protected videoCaptionService: VideoCaptionService,
-    private router: Router,
-    private videoImportService: VideoImportService,
-    private i18n: I18n
-  ) {
-    super()
-  }
-
-  ngOnInit () {
-    super.ngOnInit()
-  }
-
-  canDeactivate () {
-    return { canDeactivate: true }
-  }
-
-  isMagnetUrlValid () {
-    return !!this.magnetUri
-  }
-
-  fileChange () {
-    const torrentfile = this.torrentfileInput.nativeElement.files[0]
-    if (!torrentfile) return
-
-    this.importVideo(torrentfile)
-  }
-
-  setTorrentFile (files: FileList) {
-    this.torrentfileInput.nativeElement.files = files
-    this.fileChange()
-  }
-
-  importVideo (torrentfile?: Blob) {
-    this.isImportingVideo = true
-
-    const videoUpdate: VideoUpdate = {
-      privacy: this.firstStepPrivacyId,
-      waitTranscoding: false,
-      commentsEnabled: true,
-      downloadEnabled: true,
-      channelId: this.firstStepChannelId
-    }
-
-    this.loadingBar.start()
-
-    this.videoImportService.importVideoTorrent(torrentfile || this.magnetUri, videoUpdate).subscribe(
-      res => {
-        this.loadingBar.complete()
-        this.firstStepDone.emit(res.video.name)
-        this.isImportingVideo = false
-        this.hasImportedVideo = true
-
-        this.video = new VideoEdit(Object.assign(res.video, {
-          commentsEnabled: videoUpdate.commentsEnabled,
-          downloadEnabled: videoUpdate.downloadEnabled,
-          support: null,
-          thumbnailUrl: null,
-          previewUrl: null
-        }))
-
-        this.hydrateFormFromVideo()
-      },
-
-      err => {
-        this.loadingBar.complete()
-        this.isImportingVideo = false
-        this.firstStepError.emit()
-        this.notifier.error(err.message)
-      }
-    )
-  }
-
-  updateSecondStep () {
-    if (this.checkForm() === false) {
-      return
-    }
-
-    this.video.patch(this.form.value)
-
-    this.isUpdatingVideo = true
-
-    // Update the video
-    this.updateVideoAndCaptions(this.video)
-        .subscribe(
-          () => {
-            this.isUpdatingVideo = false
-            this.notifier.success(this.i18n('Video to import updated.'))
-
-            this.router.navigate([ '/my-account', 'video-imports' ])
-          },
-
-          err => {
-            this.error = err.message
-            scrollToTop()
-            console.error(err)
-          }
-        )
-
-  }
-
-  private hydrateFormFromVideo () {
-    this.form.patchValue(this.video.toFormPatch())
-  }
-}
diff --git a/client/src/app/videos/+video-edit/video-add-components/video-import-url.component.html b/client/src/app/videos/+video-edit/video-add-components/video-import-url.component.html
deleted file mode 100644
index 1910da403..000000000
--- a/client/src/app/videos/+video-edit/video-add-components/video-import-url.component.html
+++ /dev/null
@@ -1,72 +0,0 @@
-<div *ngIf="!hasImportedVideo" class="upload-video-container">
-  <div class="first-step-block">
-    <my-global-icon class="upload-icon" iconName="upload" aria-hidden="true"></my-global-icon>
-
-    <div class="form-group">
-      <label i18n for="targetUrl">URL</label>
-
-      <my-help>
-        <ng-template ptTemplate="customHtml">
-          <ng-container i18n>
-            You can import any URL <a href='https://rg3.github.io/youtube-dl/supportedsites.html' target='_blank' rel='noopener noreferrer'>supported by youtube-dl</a>
-            or URL that points to a raw MP4 file.
-            You should make sure you have diffusion rights over the content it points to, otherwise it could cause legal trouble to yourself and your instance.
-          </ng-container>
-        </ng-template>
-      </my-help>
-
-      <input type="text" id="targetUrl" [(ngModel)]="targetUrl" class="form-control" />
-    </div>
-
-    <div class="form-group">
-      <label i18n for="first-step-channel">Channel</label>
-      <div class="peertube-select-container">
-        <select id="first-step-channel" [(ngModel)]="firstStepChannelId" class="form-control">
-          <option *ngFor="let channel of userVideoChannels" [value]="channel.id">{{ channel.label }}</option>
-        </select>
-      </div>
-    </div>
-
-    <div class="form-group">
-      <label i18n for="first-step-privacy">Privacy</label>
-      <div class="peertube-select-container">
-        <select id="first-step-privacy" [(ngModel)]="firstStepPrivacyId" class="form-control">
-          <option *ngFor="let privacy of videoPrivacies" [value]="privacy.id">{{ privacy.label }}</option>
-        </select>
-      </div>
-    </div>
-
-    <input
-      type="button" i18n-value value="Import"
-      [disabled]="!isTargetUrlValid() || isImportingVideo" (click)="importVideo()"
-    />
-  </div>
-</div>
-
-
-<div *ngIf="error" class="alert alert-danger">
-  <div i18n>Sorry, but something went wrong</div>
-  {{ error }}
-</div>
-
-<div *ngIf="!error && hasImportedVideo" class="alert alert-info" i18n>
-  Congratulations, the video behind {{ targetUrl }} will be imported! You can already add information about this video.
-</div>
-
-<!-- Hidden because we want to load the component -->
-<form [hidden]="!hasImportedVideo" novalidate [formGroup]="form">
-  <my-video-edit
-    [form]="form" [formErrors]="formErrors" [videoCaptions]="videoCaptions" [schedulePublicationPossible]="false"
-    [validationMessages]="validationMessages" [userVideoChannels]="userVideoChannels"
-  ></my-video-edit>
-
-  <div class="submit-container">
-    <div class="submit-button"
-       (click)="updateSecondStep()"
-       [ngClass]="{ disabled: !form.valid || isUpdatingVideo === true }"
-    >
-      <my-global-icon iconName="validate" aria-hidden="true"></my-global-icon>
-      <input type="button" i18n-value value="Update" />
-    </div>
-  </div>
-</form>
diff --git a/client/src/app/videos/+video-edit/video-add-components/video-import-url.component.ts b/client/src/app/videos/+video-edit/video-add-components/video-import-url.component.ts
deleted file mode 100644
index d0bd1f54d..000000000
--- a/client/src/app/videos/+video-edit/video-add-components/video-import-url.component.ts
+++ /dev/null
@@ -1,178 +0,0 @@
-import { map, switchMap } from 'rxjs/operators'
-import { Component, EventEmitter, OnInit, Output } from '@angular/core'
-import { Router } from '@angular/router'
-import { AuthService, CanComponentDeactivate, Notifier, ServerService } from '@app/core'
-import { getAbsoluteAPIUrl, scrollToTop } from '@app/helpers'
-import { FormValidatorService } from '@app/shared/shared-forms'
-import { VideoCaptionService, VideoEdit, VideoImportService, VideoService } from '@app/shared/shared-main'
-import { VideoSend } from '@app/videos/+video-edit/video-add-components/video-send'
-import { LoadingBarService } from '@ngx-loading-bar/core'
-import { I18n } from '@ngx-translate/i18n-polyfill'
-import { VideoPrivacy, VideoUpdate } from '@shared/models'
-
-@Component({
-  selector: 'my-video-import-url',
-  templateUrl: './video-import-url.component.html',
-  styleUrls: [
-    '../shared/video-edit.component.scss',
-    './video-send.scss'
-  ]
-})
-export class VideoImportUrlComponent extends VideoSend implements OnInit, CanComponentDeactivate {
-  @Output() firstStepDone = new EventEmitter<string>()
-  @Output() firstStepError = new EventEmitter<void>()
-
-  targetUrl = ''
-
-  isImportingVideo = false
-  hasImportedVideo = false
-  isUpdatingVideo = false
-
-  video: VideoEdit
-  error: string
-
-  protected readonly DEFAULT_VIDEO_PRIVACY = VideoPrivacy.PUBLIC
-
-  constructor (
-    protected formValidatorService: FormValidatorService,
-    protected loadingBar: LoadingBarService,
-    protected notifier: Notifier,
-    protected authService: AuthService,
-    protected serverService: ServerService,
-    protected videoService: VideoService,
-    protected videoCaptionService: VideoCaptionService,
-    private router: Router,
-    private videoImportService: VideoImportService,
-    private i18n: I18n
-  ) {
-    super()
-  }
-
-  ngOnInit () {
-    super.ngOnInit()
-  }
-
-  canDeactivate () {
-    return { canDeactivate: true }
-  }
-
-  isTargetUrlValid () {
-    return this.targetUrl && this.targetUrl.match(/https?:\/\//)
-  }
-
-  importVideo () {
-    this.isImportingVideo = true
-
-    const videoUpdate: VideoUpdate = {
-      privacy: this.firstStepPrivacyId,
-      waitTranscoding: false,
-      commentsEnabled: true,
-      downloadEnabled: true,
-      channelId: this.firstStepChannelId
-    }
-
-    this.loadingBar.start()
-
-    this.videoImportService
-        .importVideoUrl(this.targetUrl, videoUpdate)
-        .pipe(
-          switchMap(res => {
-            return this.videoCaptionService
-                .listCaptions(res.video.id)
-                .pipe(
-                  map(result => ({ video: res.video, videoCaptions: result.data }))
-                )
-          })
-        )
-        .subscribe(
-          ({ video, videoCaptions }) => {
-            this.loadingBar.complete()
-            this.firstStepDone.emit(video.name)
-            this.isImportingVideo = false
-            this.hasImportedVideo = true
-
-            const absoluteAPIUrl = getAbsoluteAPIUrl()
-
-            const thumbnailUrl = video.thumbnailPath
-              ? absoluteAPIUrl + video.thumbnailPath
-              : null
-
-            const previewUrl = video.previewPath
-              ? absoluteAPIUrl + video.previewPath
-              : null
-
-            this.video = new VideoEdit(Object.assign(video, {
-              commentsEnabled: videoUpdate.commentsEnabled,
-              downloadEnabled: videoUpdate.downloadEnabled,
-              support: null,
-              thumbnailUrl,
-              previewUrl
-            }))
-
-            this.videoCaptions = videoCaptions
-
-            this.hydrateFormFromVideo()
-          },
-
-          err => {
-            this.loadingBar.complete()
-            this.isImportingVideo = false
-            this.firstStepError.emit()
-            this.notifier.error(err.message)
-          }
-        )
-  }
-
-  updateSecondStep () {
-    if (this.checkForm() === false) {
-      return
-    }
-
-    this.video.patch(this.form.value)
-
-    this.isUpdatingVideo = true
-
-    // Update the video
-    this.updateVideoAndCaptions(this.video)
-        .subscribe(
-          () => {
-            this.isUpdatingVideo = false
-            this.notifier.success(this.i18n('Video to import updated.'))
-
-            this.router.navigate([ '/my-account', 'video-imports' ])
-          },
-
-          err => {
-            this.error = err.message
-            scrollToTop()
-            console.error(err)
-          }
-        )
-
-  }
-
-  private hydrateFormFromVideo () {
-    this.form.patchValue(this.video.toFormPatch())
-
-    const objects = [
-      {
-        url: 'thumbnailUrl',
-        name: 'thumbnailfile'
-      },
-      {
-        url: 'previewUrl',
-        name: 'previewfile'
-      }
-    ]
-
-    for (const obj of objects) {
-      fetch(this.video[obj.url])
-        .then(response => response.blob())
-        .then(data => {
-          this.form.patchValue({
-            [ obj.name ]: data
-          })
-        })
-    }
-  }
-}
diff --git a/client/src/app/videos/+video-edit/video-add-components/video-send.scss b/client/src/app/videos/+video-edit/video-add-components/video-send.scss
deleted file mode 100644
index ebe14c59e..000000000
--- a/client/src/app/videos/+video-edit/video-add-components/video-send.scss
+++ /dev/null
@@ -1,46 +0,0 @@
-@import 'variables';
-@import 'mixins';
-
-$width-size: 190px;
-
-.alert.alert-danger {
-  text-align: center;
-
-  & > div {
-    font-weight: $font-semibold;
-  }
-}
-
-.first-step-block {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-
-  .upload-icon {
-    width: 90px;
-    margin-bottom: 25px;
-
-    @include apply-svg-color(#C6C6C6);
-  }
-
-  .peertube-select-container {
-    @include peertube-select-container($width-size);
-  }
-
-  input[type=text] {
-    @include peertube-input-text($width-size);
-    display: block;
-  }
-
-  input[type=button] {
-    @include peertube-button;
-    @include orange-button;
-
-    width: $width-size;
-    margin-top: 30px;
-  }
-
-  .button-file {
-    @include peertube-button-file(max-content);
-  }
-}
diff --git a/client/src/app/videos/+video-edit/video-add-components/video-send.ts b/client/src/app/videos/+video-edit/video-add-components/video-send.ts
deleted file mode 100644
index 94479321d..000000000
--- a/client/src/app/videos/+video-edit/video-add-components/video-send.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-import { catchError, switchMap, tap } from 'rxjs/operators'
-import { EventEmitter, OnInit } from '@angular/core'
-import { AuthService, CanComponentDeactivateResult, Notifier, ServerService } from '@app/core'
-import { populateAsyncUserVideoChannels } from '@app/helpers'
-import { FormReactive } from '@app/shared/shared-forms'
-import { VideoCaptionEdit, VideoCaptionService, VideoEdit, VideoService } from '@app/shared/shared-main'
-import { LoadingBarService } from '@ngx-loading-bar/core'
-import { ServerConfig, VideoConstant, VideoPrivacy } from '@shared/models'
-
-export abstract class VideoSend extends FormReactive implements OnInit {
-  userVideoChannels: { id: number, label: string, support: string }[] = []
-  videoPrivacies: VideoConstant<VideoPrivacy>[] = []
-  videoCaptions: VideoCaptionEdit[] = []
-
-  firstStepPrivacyId = 0
-  firstStepChannelId = 0
-
-  abstract firstStepDone: EventEmitter<string>
-  abstract firstStepError: EventEmitter<void>
-  protected abstract readonly DEFAULT_VIDEO_PRIVACY: VideoPrivacy
-
-  protected loadingBar: LoadingBarService
-  protected notifier: Notifier
-  protected authService: AuthService
-  protected serverService: ServerService
-  protected videoService: VideoService
-  protected videoCaptionService: VideoCaptionService
-  protected serverConfig: ServerConfig
-
-  abstract canDeactivate (): CanComponentDeactivateResult
-
-  ngOnInit () {
-    this.buildForm({})
-
-    populateAsyncUserVideoChannels(this.authService, this.userVideoChannels)
-      .then(() => this.firstStepChannelId = this.userVideoChannels[ 0 ].id)
-
-    this.serverConfig = this.serverService.getTmpConfig()
-    this.serverService.getConfig()
-        .subscribe(config => this.serverConfig = config)
-
-    this.serverService.getVideoPrivacies()
-        .subscribe(
-          privacies => {
-            this.videoPrivacies = privacies
-
-            this.firstStepPrivacyId = this.DEFAULT_VIDEO_PRIVACY
-          })
-  }
-
-  checkForm () {
-    this.forceCheck()
-
-    return this.form.valid
-  }
-
-  protected updateVideoAndCaptions (video: VideoEdit) {
-    this.loadingBar.start()
-
-    return this.videoService.updateVideo(video)
-        .pipe(
-          // Then update captions
-          switchMap(() => this.videoCaptionService.updateCaptions(video.id, this.videoCaptions)),
-          tap(() => this.loadingBar.complete()),
-          catchError(err => {
-            this.loadingBar.complete()
-            throw err
-          })
-        )
-  }
-}
diff --git a/client/src/app/videos/+video-edit/video-add-components/video-upload.component.html b/client/src/app/videos/+video-edit/video-add-components/video-upload.component.html
deleted file mode 100644
index dad88a661..000000000
--- a/client/src/app/videos/+video-edit/video-add-components/video-upload.component.html
+++ /dev/null
@@ -1,90 +0,0 @@
-<div *ngIf="!isUploadingVideo" class="upload-video-container" dragDrop (fileDropped)="setVideoFile($event)">
-  <div class="first-step-block">
-    <my-global-icon class="upload-icon" iconName="upload" aria-hidden="true"></my-global-icon>
-
-    <div class="button-file form-control" [ngbTooltip]="'(extensions: ' + videoExtensions + ')'">
-      <span i18n>Select the file to upload</span>
-      <input #videofileInput type="file" name="videofile" id="videofile" [accept]="videoExtensions" (change)="fileChange()" autofocus />
-    </div>
-
-    <div class="form-group form-group-channel">
-      <label i18n for="first-step-channel">Channel</label>
-      <div class="peertube-select-container">
-        <select id="first-step-channel" [(ngModel)]="firstStepChannelId" class="form-control">
-          <option *ngFor="let channel of userVideoChannels" [value]="channel.id">{{ channel.label }}</option>
-        </select>
-      </div>
-    </div>
-
-    <div class="form-group">
-      <label i18n for="first-step-privacy">Privacy</label>
-      <div class="peertube-select-container">
-        <select id="first-step-privacy" [(ngModel)]="firstStepPrivacyId" class="form-control">
-          <option *ngFor="let privacy of videoPrivacies" [value]="privacy.id">{{ privacy.label }}</option>
-          <option i18n [value]="SPECIAL_SCHEDULED_PRIVACY">Scheduled</option>
-        </select>
-      </div>
-    </div>
-
-    <ng-container *ngIf="isUploadingAudioFile">
-      <div  class="form-group audio-preview">
-        <label i18n for="previewfileUpload">Video background image</label>
-
-        <div i18n class="audio-image-info">
-          Image that will be merged with your audio file.
-          <br />
-          The chosen image will be definitive and cannot be modified.
-        </div>
-
-        <my-preview-upload
-          i18n-inputLabel inputLabel="Edit" inputName="previewfileUpload" [(ngModel)]="previewfileUpload"
-          previewWidth="360px" previewHeight="200px"
-        ></my-preview-upload>
-      </div>
-
-      <div class="form-group upload-audio-button">
-        <my-button className="orange-button" i18n-label [label]="getAudioUploadLabel()" icon="upload" (click)="uploadFirstStep(true)"></my-button>
-      </div>
-    </ng-container>
-  </div>
-</div>
-
-<div *ngIf="isUploadingVideo && !error" class="upload-progress-cancel">
-  <div class="progress" i18n-title title="Total video quota">
-    <div class="progress-bar" role="progressbar" [style]="{ width: videoUploadPercents + '%' }" [attr.aria-valuenow]="videoUploadPercents" aria-valuemin="0" [attr.aria-valuemax]="100">
-      <span *ngIf="videoUploadPercents === 100 && videoUploaded === false" i18n>Processing…</span>
-      <span *ngIf="videoUploadPercents !== 100 || videoUploaded">{{ videoUploadPercents }}%</span>
-    </div>
-  </div>
-  <input *ngIf="videoUploaded === false" type="button" value="Cancel" (click)="cancelUpload()" />
-</div>
-
-<div *ngIf="error" class="alert alert-danger">
-  <div i18n>Sorry, but something went wrong</div>
-  {{ error }}
-</div>
-
-<div *ngIf="videoUploaded && !error" class="alert alert-info" i18n>
-  Congratulations! Your video is now available in your private library.
-</div>
-
-<!-- Hidden because we want to load the component -->
-<form [hidden]="!isUploadingVideo" novalidate [formGroup]="form" class="mb-3">
-  <my-video-edit
-    [form]="form" [formErrors]="formErrors" [videoCaptions]="videoCaptions"
-    [validationMessages]="validationMessages" [userVideoChannels]="userVideoChannels"
-    [waitTranscodingEnabled]="waitTranscodingEnabled"
-  ></my-video-edit>
-
-  <div class="submit-container">
-    <div i18n *ngIf="videoUploaded === false" class="message-submit">Publish will be available when upload is finished</div>
-
-    <div class="submit-button"
-       (click)="updateSecondStep()"
-       [ngClass]="{ disabled: isPublishingButtonDisabled() }"
-    >
-      <my-global-icon iconName="validate" aria-hidden="true"></my-global-icon>
-      <input [disabled]="isPublishingButtonDisabled()" type="button" i18n-value value="Publish" />
-    </div>
-  </div>
-</form>
diff --git a/client/src/app/videos/+video-edit/video-add-components/video-upload.component.scss b/client/src/app/videos/+video-edit/video-add-components/video-upload.component.scss
deleted file mode 100644
index a4f87b0b8..000000000
--- a/client/src/app/videos/+video-edit/video-add-components/video-upload.component.scss
+++ /dev/null
@@ -1,49 +0,0 @@
-@import 'variables';
-@import 'mixins';
-
-.first-step-block {
-  .form-group-channel {
-    margin-bottom: 20px;
-    margin-top: 35px;
-  }
-
-  .audio-image-info {
-    margin-bottom: 10px;
-  }
-
-  .audio-preview {
-    margin: 30px 0;
-  }
-}
-
-.upload-progress-cancel {
-  display: flex;
-  margin-top: 25px;
-  margin-bottom: 40px;
-
-  .progress {
-    @include progressbar;
-    flex-grow: 1;
-    height: 30px;
-    font-size: 15px;
-    background-color: rgba(11, 204, 41, 0.16);
-
-    .progress-bar {
-      background-color: $green;
-      line-height: 30px;
-      text-align: left;
-      font-weight: $font-bold;
-
-      span {
-        margin-left: 18px;
-      }
-    }
-  }
-
-  input {
-    @include peertube-button;
-    @include grey-button;
-
-    margin-left: 10px;
-  }
-}
diff --git a/client/src/app/videos/+video-edit/video-add-components/video-upload.component.ts b/client/src/app/videos/+video-edit/video-add-components/video-upload.component.ts
deleted file mode 100644
index eb7ac32ae..000000000
--- a/client/src/app/videos/+video-edit/video-add-components/video-upload.component.ts
+++ /dev/null
@@ -1,306 +0,0 @@
-import { BytesPipe } from 'ngx-pipes'
-import { Subscription } from 'rxjs'
-import { HttpEventType, HttpResponse } from '@angular/common/http'
-import { Component, ElementRef, EventEmitter, OnDestroy, OnInit, Output, ViewChild } from '@angular/core'
-import { Router } from '@angular/router'
-import { AuthService, CanComponentDeactivate, Notifier, ServerService, UserService } from '@app/core'
-import { scrollToTop } from '@app/helpers'
-import { FormValidatorService } from '@app/shared/shared-forms'
-import { VideoCaptionService, VideoEdit, VideoService } from '@app/shared/shared-main'
-import { VideoSend } from '@app/videos/+video-edit/video-add-components/video-send'
-import { LoadingBarService } from '@ngx-loading-bar/core'
-import { I18n } from '@ngx-translate/i18n-polyfill'
-import { VideoPrivacy } from '@shared/models'
-
-@Component({
-  selector: 'my-video-upload',
-  templateUrl: './video-upload.component.html',
-  styleUrls: [
-    '../shared/video-edit.component.scss',
-    './video-upload.component.scss',
-    './video-send.scss'
-  ]
-})
-export class VideoUploadComponent extends VideoSend implements OnInit, OnDestroy, CanComponentDeactivate {
-  @Output() firstStepDone = new EventEmitter<string>()
-  @Output() firstStepError = new EventEmitter<void>()
-  @ViewChild('videofileInput') videofileInput: ElementRef<HTMLInputElement>
-
-  // So that it can be accessed in the template
-  readonly SPECIAL_SCHEDULED_PRIVACY = VideoEdit.SPECIAL_SCHEDULED_PRIVACY
-
-  userVideoQuotaUsed = 0
-  userVideoQuotaUsedDaily = 0
-
-  isUploadingAudioFile = false
-  isUploadingVideo = false
-  isUpdatingVideo = false
-
-  videoUploaded = false
-  videoUploadObservable: Subscription = null
-  videoUploadPercents = 0
-  videoUploadedIds = {
-    id: 0,
-    uuid: ''
-  }
-
-  waitTranscodingEnabled = true
-  previewfileUpload: File
-
-  error: string
-
-  protected readonly DEFAULT_VIDEO_PRIVACY = VideoPrivacy.PUBLIC
-
-  constructor (
-    protected formValidatorService: FormValidatorService,
-    protected loadingBar: LoadingBarService,
-    protected notifier: Notifier,
-    protected authService: AuthService,
-    protected serverService: ServerService,
-    protected videoService: VideoService,
-    protected videoCaptionService: VideoCaptionService,
-    private userService: UserService,
-    private router: Router,
-    private i18n: I18n
-  ) {
-    super()
-  }
-
-  get videoExtensions () {
-    return this.serverConfig.video.file.extensions.join(', ')
-  }
-
-  ngOnInit () {
-    super.ngOnInit()
-
-    this.userService.getMyVideoQuotaUsed()
-        .subscribe(data => {
-          this.userVideoQuotaUsed = data.videoQuotaUsed
-          this.userVideoQuotaUsedDaily = data.videoQuotaUsedDaily
-        })
-  }
-
-  ngOnDestroy () {
-    if (this.videoUploadObservable) this.videoUploadObservable.unsubscribe()
-  }
-
-  canDeactivate () {
-    let text = ''
-
-    if (this.videoUploaded === true) {
-      // FIXME: cannot concatenate strings inside i18n service :/
-      text = this.i18n('Your video was uploaded to your account and is private.') + ' ' +
-        this.i18n('But associated data (tags, description...) will be lost, are you sure you want to leave this page?')
-    } else {
-      text = this.i18n('Your video is not uploaded yet, are you sure you want to leave this page?')
-    }
-
-    return {
-      canDeactivate: !this.isUploadingVideo,
-      text
-    }
-  }
-
-  getVideoFile () {
-    return this.videofileInput.nativeElement.files[0]
-  }
-
-  setVideoFile (files: FileList) {
-    this.videofileInput.nativeElement.files = files
-    this.fileChange()
-  }
-
-  getAudioUploadLabel () {
-    const videofile = this.getVideoFile()
-    if (!videofile) return this.i18n('Upload')
-
-    return this.i18n('Upload {{videofileName}}', { videofileName: videofile.name })
-  }
-
-  fileChange () {
-    this.uploadFirstStep()
-  }
-
-  cancelUpload () {
-    if (this.videoUploadObservable !== null) {
-      this.videoUploadObservable.unsubscribe()
-
-      this.isUploadingVideo = false
-      this.videoUploadPercents = 0
-      this.videoUploadObservable = null
-
-      this.firstStepError.emit()
-
-      this.notifier.info(this.i18n('Upload cancelled'))
-    }
-  }
-
-  uploadFirstStep (clickedOnButton = false) {
-    const videofile = this.getVideoFile()
-    if (!videofile) return
-
-    if (!this.checkGlobalUserQuota(videofile)) return
-    if (!this.checkDailyUserQuota(videofile)) return
-
-    if (clickedOnButton === false && this.isAudioFile(videofile.name)) {
-      this.isUploadingAudioFile = true
-      return
-    }
-
-    // Build name field
-    const nameWithoutExtension = videofile.name.replace(/\.[^/.]+$/, '')
-    let name: string
-
-    // If the name of the file is very small, keep the extension
-    if (nameWithoutExtension.length < 3) name = videofile.name
-    else name = nameWithoutExtension
-
-    // Force user to wait transcoding for unsupported video types in web browsers
-    if (!videofile.name.endsWith('.mp4') && !videofile.name.endsWith('.webm') && !videofile.name.endsWith('.ogv')) {
-      this.waitTranscodingEnabled = false
-    }
-
-    const privacy = this.firstStepPrivacyId.toString()
-    const nsfw = this.serverConfig.instance.isNSFW
-    const waitTranscoding = true
-    const commentsEnabled = true
-    const downloadEnabled = true
-    const channelId = this.firstStepChannelId.toString()
-
-    const formData = new FormData()
-    formData.append('name', name)
-    // Put the video "private" -> we are waiting the user validation of the second step
-    formData.append('privacy', VideoPrivacy.PRIVATE.toString())
-    formData.append('nsfw', '' + nsfw)
-    formData.append('commentsEnabled', '' + commentsEnabled)
-    formData.append('downloadEnabled', '' + downloadEnabled)
-    formData.append('waitTranscoding', '' + waitTranscoding)
-    formData.append('channelId', '' + channelId)
-    formData.append('videofile', videofile)
-
-    if (this.previewfileUpload) {
-      formData.append('previewfile', this.previewfileUpload)
-      formData.append('thumbnailfile', this.previewfileUpload)
-    }
-
-    this.isUploadingVideo = true
-    this.firstStepDone.emit(name)
-
-    this.form.patchValue({
-      name,
-      privacy,
-      nsfw,
-      channelId,
-      previewfile: this.previewfileUpload
-    })
-
-    this.videoUploadObservable = this.videoService.uploadVideo(formData).subscribe(
-      event => {
-        if (event.type === HttpEventType.UploadProgress) {
-          this.videoUploadPercents = Math.round(100 * event.loaded / event.total)
-        } else if (event instanceof HttpResponse) {
-          this.videoUploaded = true
-
-          this.videoUploadedIds = event.body.video
-
-          this.videoUploadObservable = null
-        }
-      },
-
-      err => {
-        // Reset progress
-        this.isUploadingVideo = false
-        this.videoUploadPercents = 0
-        this.videoUploadObservable = null
-        this.firstStepError.emit()
-        this.notifier.error(err.message)
-      }
-    )
-  }
-
-  isPublishingButtonDisabled () {
-    return !this.form.valid ||
-      this.isUpdatingVideo === true ||
-      this.videoUploaded !== true
-  }
-
-  updateSecondStep () {
-    if (this.checkForm() === false) {
-      return
-    }
-
-    const video = new VideoEdit()
-    video.patch(this.form.value)
-    video.id = this.videoUploadedIds.id
-    video.uuid = this.videoUploadedIds.uuid
-
-    this.isUpdatingVideo = true
-
-    this.updateVideoAndCaptions(video)
-        .subscribe(
-          () => {
-            this.isUpdatingVideo = false
-            this.isUploadingVideo = false
-
-            this.notifier.success(this.i18n('Video published.'))
-            this.router.navigate([ '/videos/watch', video.uuid ])
-          },
-
-          err => {
-            this.error = err.message
-            scrollToTop()
-            console.error(err)
-          }
-        )
-  }
-
-  private checkGlobalUserQuota (videofile: File) {
-    const bytePipes = new BytesPipe()
-
-    // Check global user quota
-    const videoQuota = this.authService.getUser().videoQuota
-    if (videoQuota !== -1 && (this.userVideoQuotaUsed + videofile.size) > videoQuota) {
-      const msg = this.i18n(
-        'Your video quota is exceeded with this video (video size: {{videoSize}}, used: {{videoQuotaUsed}}, quota: {{videoQuota}})',
-        {
-          videoSize: bytePipes.transform(videofile.size, 0),
-          videoQuotaUsed: bytePipes.transform(this.userVideoQuotaUsed, 0),
-          videoQuota: bytePipes.transform(videoQuota, 0)
-        }
-      )
-      this.notifier.error(msg)
-
-      return false
-    }
-
-    return true
-  }
-
-  private checkDailyUserQuota (videofile: File) {
-    const bytePipes = new BytesPipe()
-
-    // Check daily user quota
-    const videoQuotaDaily = this.authService.getUser().videoQuotaDaily
-    if (videoQuotaDaily !== -1 && (this.userVideoQuotaUsedDaily + videofile.size) > videoQuotaDaily) {
-      const msg = this.i18n(
-        'Your daily video quota is exceeded with this video (video size: {{videoSize}}, used: {{quotaUsedDaily}}, quota: {{quotaDaily}})',
-        {
-          videoSize: bytePipes.transform(videofile.size, 0),
-          quotaUsedDaily: bytePipes.transform(this.userVideoQuotaUsedDaily, 0),
-          quotaDaily: bytePipes.transform(videoQuotaDaily, 0)
-        }
-      )
-      this.notifier.error(msg)
-
-      return false
-    }
-
-    return true
-  }
-
-  private isAudioFile (filename: string) {
-    const extensions = [ '.mp3', '.flac', '.ogg', '.wma', '.wav' ]
-
-    return extensions.some(e => filename.endsWith(e))
-  }
-}
diff --git a/client/src/app/videos/+video-edit/video-add-routing.module.ts b/client/src/app/videos/+video-edit/video-add-routing.module.ts
deleted file mode 100644
index 9ff66bea0..000000000
--- a/client/src/app/videos/+video-edit/video-add-routing.module.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { NgModule } from '@angular/core'
-import { RouterModule, Routes } from '@angular/router'
-import { CanDeactivateGuard, LoginGuard } from '@app/core'
-import { MetaGuard } from '@ngx-meta/core'
-import { VideoAddComponent } from './video-add.component'
-
-const videoAddRoutes: Routes = [
-  {
-    path: '',
-    component: VideoAddComponent,
-    canActivate: [ MetaGuard, LoginGuard ],
-    canDeactivate: [ CanDeactivateGuard ]
-  }
-]
-
-@NgModule({
-  imports: [ RouterModule.forChild(videoAddRoutes) ],
-  exports: [ RouterModule ]
-})
-export class VideoAddRoutingModule {}
diff --git a/client/src/app/videos/+video-edit/video-add.component.html b/client/src/app/videos/+video-edit/video-add.component.html
deleted file mode 100644
index 79bfc6e5c..000000000
--- a/client/src/app/videos/+video-edit/video-add.component.html
+++ /dev/null
@@ -1,46 +0,0 @@
-<div class="margin-content">
-  <div class="alert alert-warning" *ngIf="isRootUser()" i18n>
-    We recommend you to not use the <strong>root</strong> user to publish your videos, since it's the super-admin account of your instance.
-    <br />
-    Instead, <a routerLink="/admin/users">create a dedicated account</a> to upload your videos.
-  </div>
-
-  <div class="title-page title-page-single" *ngIf="isInSecondStep()">
-    <ng-container *ngIf="secondStepType === 'import-url' || secondStepType === 'import-torrent'" i18n>Import {{ videoName }}</ng-container>
-    <ng-container *ngIf="secondStepType === 'upload'" i18n>Upload {{ videoName }}</ng-container>
-  </div>
-
-  <div ngbNav #nav="ngbNav" class="nav-tabs video-add-nav" [ngClass]="{ 'hide-nav': secondStepType !== undefined }">
-    <ng-container ngbNavItem>
-      <a ngbNavLink>
-        <span i18n>Upload a file</span>
-      </a>
-
-      <ng-template ngbNavContent>
-        <my-video-upload #videoUpload (firstStepDone)="onFirstStepDone('upload', $event)" (firstStepError)="onError()"></my-video-upload>
-      </ng-template>
-    </ng-container>
-
-    <ng-container ngbNavItem *ngIf="isVideoImportHttpEnabled()">
-      <a ngbNavLink>
-        <span i18n>Import with URL</span>
-      </a>
-
-      <ng-template ngbNavContent>
-        <my-video-import-url #videoImportUrl (firstStepDone)="onFirstStepDone('import-url', $event)" (firstStepError)="onError()"></my-video-import-url>
-      </ng-template>
-    </ng-container>
-
-    <ng-container ngbNavItem *ngIf="isVideoImportTorrentEnabled()">
-      <a ngbNavLink>
-        <span i18n>Import with torrent</span>
-      </a>
-
-      <ng-template ngbNavContent>
-        <my-video-import-torrent #videoImportTorrent (firstStepDone)="onFirstStepDone('import-torrent', $event)" (firstStepError)="onError()"></my-video-import-torrent>
-      </ng-template>
-    </ng-container>
-  </div>
-
-  <div [ngbNavOutlet]="nav"></div>
-</div>
diff --git a/client/src/app/videos/+video-edit/video-add.component.scss b/client/src/app/videos/+video-edit/video-add.component.scss
deleted file mode 100644
index 0ad57d897..000000000
--- a/client/src/app/videos/+video-edit/video-add.component.scss
+++ /dev/null
@@ -1,89 +0,0 @@
-@import '_variables';
-@import '_mixins';
-
-$border-width: 3px;
-$border-type: solid;
-$border-color: #EAEAEA;
-$nav-link-height: 40px;
-
-.margin-content {
-  padding-top: 50px;
-}
-
-.alert {
-  font-size: 15px;
-}
-
-::ng-deep .video-add-nav {
-  border-bottom: $border-width $border-type $border-color;
-  margin: 50px 0 0 0 !important;
-
-  &.hide-nav {
-    display: none !important;
-  }
-
-  a.nav-link {
-    @include disable-default-a-behaviour;
-
-    margin-bottom: -$border-width;
-    height: $nav-link-height !important;
-    padding: 0 30px !important;
-    font-size: 15px;
-
-    &.active {
-      border: $border-width $border-type $border-color;
-      border-bottom: none;
-      background-color: pvar(--submenuColor) !important;
-
-      span {
-        border-bottom: 2px solid pvar(--mainColor);
-        font-weight: $font-bold;
-      }
-    }
-  }
-}
-
-::ng-deep .upload-video-container {
-  border: $border-width $border-type $border-color;
-  border-top: transparent;
-
-  background-color: pvar(--submenuColor);
-  border-bottom-left-radius: 3px;
-  border-bottom-right-radius: 3px;
-  width: 100%;
-  min-height: 440px;
-  padding-bottom: 20px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  &.dragover {
-    border: 3px dashed pvar(--mainColor);
-  }
-}
-
-@mixin nav-scroll {
-  ::ng-deep .video-add-nav {
-    height: #{$nav-link-height + $border-width * 2};
-    overflow-x: auto;
-    white-space: nowrap;
-    flex-wrap: unset;
-
-    /* Hide active tab style to not have a moving tab effect */
-    a.nav-link.active {
-      border: none;
-      background-color: pvar(--mainBackgroundColor) !important;
-    }
-  }
-}
-
-/* Make .video-add-nav tabs scrollable on small devices */
-@media screen and (max-width: $small-view) {
-  @include nav-scroll();
-}
-
-@media screen and (max-width: #{$small-view + $menu-width}) {
-  :host-context(.main-col:not(.expanded)) {
-    @include nav-scroll();
-  }
-}
diff --git a/client/src/app/videos/+video-edit/video-add.component.ts b/client/src/app/videos/+video-edit/video-add.component.ts
deleted file mode 100644
index 5bd768809..000000000
--- a/client/src/app/videos/+video-edit/video-add.component.ts
+++ /dev/null
@@ -1,77 +0,0 @@
-import { Component, HostListener, OnInit, ViewChild } from '@angular/core'
-import { AuthService, CanComponentDeactivate, ServerService } from '@app/core'
-import { ServerConfig } from '@shared/models'
-import { VideoImportTorrentComponent } from './video-add-components/video-import-torrent.component'
-import { VideoImportUrlComponent } from './video-add-components/video-import-url.component'
-import { VideoUploadComponent } from './video-add-components/video-upload.component'
-
-@Component({
-  selector: 'my-videos-add',
-  templateUrl: './video-add.component.html',
-  styleUrls: [ './video-add.component.scss' ]
-})
-export class VideoAddComponent implements OnInit, CanComponentDeactivate {
-  @ViewChild('videoUpload') videoUpload: VideoUploadComponent
-  @ViewChild('videoImportUrl') videoImportUrl: VideoImportUrlComponent
-  @ViewChild('videoImportTorrent') videoImportTorrent: VideoImportTorrentComponent
-
-  secondStepType: 'upload' | 'import-url' | 'import-torrent'
-  videoName: string
-  serverConfig: ServerConfig
-
-  constructor (
-    private auth: AuthService,
-    private serverService: ServerService
-  ) {}
-
-  ngOnInit () {
-    this.serverConfig = this.serverService.getTmpConfig()
-
-    this.serverService.getConfig()
-      .subscribe(config => this.serverConfig = config)
-  }
-
-  onFirstStepDone (type: 'upload' | 'import-url' | 'import-torrent', videoName: string) {
-    this.secondStepType = type
-    this.videoName = videoName
-  }
-
-  onError () {
-    this.videoName = undefined
-    this.secondStepType = undefined
-  }
-
-  @HostListener('window:beforeunload', [ '$event' ])
-  onUnload (event: any) {
-    const { text, canDeactivate } = this.canDeactivate()
-
-    if (canDeactivate) return
-
-    event.returnValue = text
-    return text
-  }
-
-  canDeactivate (): { canDeactivate: boolean, text?: string} {
-    if (this.secondStepType === 'upload') return this.videoUpload.canDeactivate()
-    if (this.secondStepType === 'import-url') return this.videoImportUrl.canDeactivate()
-    if (this.secondStepType === 'import-torrent') return this.videoImportTorrent.canDeactivate()
-
-    return { canDeactivate: true }
-  }
-
-  isVideoImportHttpEnabled () {
-    return this.serverConfig.import.videos.http.enabled
-  }
-
-  isVideoImportTorrentEnabled () {
-    return this.serverConfig.import.videos.torrent.enabled
-  }
-
-  isInSecondStep () {
-    return !!this.secondStepType
-  }
-
-  isRootUser () {
-    return this.auth.getUser().username === 'root'
-  }
-}
diff --git a/client/src/app/videos/+video-edit/video-add.module.ts b/client/src/app/videos/+video-edit/video-add.module.ts
deleted file mode 100644
index 477c1cf5e..000000000
--- a/client/src/app/videos/+video-edit/video-add.module.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { NgModule } from '@angular/core'
-import { CanDeactivateGuard } from '@app/core'
-import { VideoEditModule } from './shared/video-edit.module'
-import { DragDropDirective } from './video-add-components/drag-drop.directive'
-import { VideoImportTorrentComponent } from './video-add-components/video-import-torrent.component'
-import { VideoImportUrlComponent } from './video-add-components/video-import-url.component'
-import { VideoUploadComponent } from './video-add-components/video-upload.component'
-import { VideoAddRoutingModule } from './video-add-routing.module'
-import { VideoAddComponent } from './video-add.component'
-
-@NgModule({
-  imports: [
-    VideoAddRoutingModule,
-
-    VideoEditModule
-  ],
-
-  declarations: [
-    VideoAddComponent,
-    VideoUploadComponent,
-    VideoImportUrlComponent,
-    VideoImportTorrentComponent,
-    DragDropDirective
-  ],
-
-  exports: [ ],
-
-  providers: [
-    CanDeactivateGuard
-  ]
-})
-export class VideoAddModule { }
diff --git a/client/src/app/videos/+video-edit/video-update-routing.module.ts b/client/src/app/videos/+video-edit/video-update-routing.module.ts
deleted file mode 100644
index a04351b05..000000000
--- a/client/src/app/videos/+video-edit/video-update-routing.module.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { NgModule } from '@angular/core'
-import { RouterModule, Routes } from '@angular/router'
-import { CanDeactivateGuard, LoginGuard } from '@app/core'
-import { MetaGuard } from '@ngx-meta/core'
-import { VideoUpdateComponent } from './video-update.component'
-import { VideoUpdateResolver } from './video-update.resolver'
-
-const videoUpdateRoutes: Routes = [
-  {
-    path: '',
-    component: VideoUpdateComponent,
-    canActivate: [ MetaGuard, LoginGuard ],
-    canDeactivate: [ CanDeactivateGuard ],
-    resolve: {
-      videoData: VideoUpdateResolver
-    }
-  }
-]
-
-@NgModule({
-  imports: [ RouterModule.forChild(videoUpdateRoutes) ],
-  exports: [ RouterModule ]
-})
-export class VideoUpdateRoutingModule {}
diff --git a/client/src/app/videos/+video-edit/video-update.component.html b/client/src/app/videos/+video-edit/video-update.component.html
deleted file mode 100644
index fbc642db9..000000000
--- a/client/src/app/videos/+video-edit/video-update.component.html
+++ /dev/null
@@ -1,22 +0,0 @@
-<div class="margin-content">
-  <div class="title-page title-page-single">
-    <span class="mr-1" i18n>Update</span>
-    <a [routerLink]="[ '/videos/watch', video.uuid ]">{{ video?.name }}</a>
-  </div>
-
-  <form novalidate [formGroup]="form">
-
-    <my-video-edit
-      [form]="form" [formErrors]="formErrors" [schedulePublicationPossible]="schedulePublicationPossible"
-      [validationMessages]="validationMessages" [userVideoChannels]="userVideoChannels"
-      [videoCaptions]="videoCaptions" [waitTranscodingEnabled]="waitTranscodingEnabled"
-    ></my-video-edit>
-
-    <div class="submit-container">
-      <div class="submit-button" (click)="update()" [ngClass]="{ disabled: !form.valid || isUpdatingVideo === true }">
-        <my-global-icon iconName="validate" aria-hidden="true"></my-global-icon>
-        <input type="button" i18n-value value="Update" />
-      </div>
-    </div>
-  </form>
-</div>
diff --git a/client/src/app/videos/+video-edit/video-update.component.ts b/client/src/app/videos/+video-edit/video-update.component.ts
deleted file mode 100644
index 7bd6eb553..000000000
--- a/client/src/app/videos/+video-edit/video-update.component.ts
+++ /dev/null
@@ -1,155 +0,0 @@
-import { map, switchMap } from 'rxjs/operators'
-import { Component, HostListener, OnInit } from '@angular/core'
-import { ActivatedRoute, Router } from '@angular/router'
-import { Notifier } from '@app/core'
-import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
-import { VideoCaptionEdit, VideoCaptionService, VideoDetails, VideoEdit, VideoService } from '@app/shared/shared-main'
-import { LoadingBarService } from '@ngx-loading-bar/core'
-import { I18n } from '@ngx-translate/i18n-polyfill'
-import { VideoPrivacy } from '@shared/models'
-
-@Component({
-  selector: 'my-videos-update',
-  styleUrls: [ './shared/video-edit.component.scss' ],
-  templateUrl: './video-update.component.html'
-})
-export class VideoUpdateComponent extends FormReactive implements OnInit {
-  video: VideoEdit
-
-  isUpdatingVideo = false
-  userVideoChannels: { id: number, label: string, support: string }[] = []
-  schedulePublicationPossible = false
-  videoCaptions: VideoCaptionEdit[] = []
-  waitTranscodingEnabled = true
-
-  private updateDone = false
-
-  constructor (
-    protected formValidatorService: FormValidatorService,
-    private route: ActivatedRoute,
-    private router: Router,
-    private notifier: Notifier,
-    private videoService: VideoService,
-    private loadingBar: LoadingBarService,
-    private videoCaptionService: VideoCaptionService,
-    private i18n: I18n
-  ) {
-    super()
-  }
-
-  ngOnInit () {
-    this.buildForm({})
-
-    this.route.data
-        .pipe(map(data => data.videoData))
-        .subscribe(({ video, videoChannels, videoCaptions }) => {
-          this.video = new VideoEdit(video)
-          this.userVideoChannels = videoChannels
-          this.videoCaptions = videoCaptions
-
-          this.schedulePublicationPossible = this.video.privacy === VideoPrivacy.PRIVATE
-
-          const videoFiles = (video as VideoDetails).getFiles()
-          if (videoFiles.length > 1) { // Already transcoded
-            this.waitTranscodingEnabled = false
-          }
-
-          // FIXME: Angular does not detect the change inside this subscription, so use the patched setTimeout
-          setTimeout(() => this.hydrateFormFromVideo())
-        },
-
-        err => {
-          console.error(err)
-          this.notifier.error(err.message)
-        }
-      )
-  }
-
-  @HostListener('window:beforeunload', [ '$event' ])
-  onUnload (event: any) {
-    const { text, canDeactivate } = this.canDeactivate()
-
-    if (canDeactivate) return
-
-    event.returnValue = text
-    return text
-  }
-
-  canDeactivate (): { canDeactivate: boolean, text?: string } {
-    if (this.updateDone === true) return { canDeactivate: true }
-
-    const text = this.i18n('You have unsaved changes! If you leave, your changes will be lost.')
-
-    for (const caption of this.videoCaptions) {
-      if (caption.action) return { canDeactivate: false, text }
-    }
-
-    return { canDeactivate: this.formChanged === false, text }
-  }
-
-  checkForm () {
-    this.forceCheck()
-
-    return this.form.valid
-  }
-
-  update () {
-    if (this.checkForm() === false
-      || this.isUpdatingVideo === true) {
-      return
-    }
-
-    this.video.patch(this.form.value)
-
-    this.loadingBar.start()
-    this.isUpdatingVideo = true
-
-    // Update the video
-    this.videoService.updateVideo(this.video)
-        .pipe(
-          // Then update captions
-          switchMap(() => this.videoCaptionService.updateCaptions(this.video.id, this.videoCaptions))
-        )
-        .subscribe(
-          () => {
-            this.updateDone = true
-            this.isUpdatingVideo = false
-            this.loadingBar.complete()
-            this.notifier.success(this.i18n('Video updated.'))
-            this.router.navigate([ '/videos/watch', this.video.uuid ])
-          },
-
-          err => {
-            this.loadingBar.complete()
-            this.isUpdatingVideo = false
-            this.notifier.error(err.message)
-            console.error(err)
-          }
-        )
-  }
-
-  private hydrateFormFromVideo () {
-    this.form.patchValue(this.video.toFormPatch())
-
-    const objects = [
-      {
-        url: 'thumbnailUrl',
-        name: 'thumbnailfile'
-      },
-      {
-        url: 'previewUrl',
-        name: 'previewfile'
-      }
-    ]
-
-    for (const obj of objects) {
-      fetch(this.video[obj.url])
-        .then(response => response.blob())
-        .then(data => {
-          this.form.patchValue({
-            [ obj.name ]: data
-          })
-        })
-    }
-  }
-}
diff --git a/client/src/app/videos/+video-edit/video-update.module.ts b/client/src/app/videos/+video-edit/video-update.module.ts
deleted file mode 100644
index 322c69629..000000000
--- a/client/src/app/videos/+video-edit/video-update.module.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { NgModule } from '@angular/core'
-import { CanDeactivateGuard } from '@app/core'
-import { VideoUpdateResolver } from '@app/videos/+video-edit/video-update.resolver'
-import { VideoEditModule } from './shared/video-edit.module'
-import { VideoUpdateRoutingModule } from './video-update-routing.module'
-import { VideoUpdateComponent } from './video-update.component'
-
-@NgModule({
-  imports: [
-    VideoUpdateRoutingModule,
-
-    VideoEditModule
-  ],
-
-  declarations: [
-    VideoUpdateComponent
-  ],
-
-  exports: [ ],
-
-  providers: [
-    VideoUpdateResolver,
-    CanDeactivateGuard
-  ]
-})
-export class VideoUpdateModule { }
diff --git a/client/src/app/videos/+video-edit/video-update.resolver.ts b/client/src/app/videos/+video-edit/video-update.resolver.ts
deleted file mode 100644
index 30bcf4d74..000000000
--- a/client/src/app/videos/+video-edit/video-update.resolver.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import { forkJoin } from 'rxjs'
-import { map, switchMap } from 'rxjs/operators'
-import { Injectable } from '@angular/core'
-import { ActivatedRouteSnapshot, Resolve } from '@angular/router'
-import { VideoCaptionService, VideoChannelService, VideoService } from '@app/shared/shared-main'
-
-@Injectable()
-export class VideoUpdateResolver implements Resolve<any> {
-  constructor (
-    private videoService: VideoService,
-    private videoChannelService: VideoChannelService,
-    private videoCaptionService: VideoCaptionService
-  ) {
-  }
-
-  resolve (route: ActivatedRouteSnapshot) {
-    const uuid: string = route.params[ 'uuid' ]
-
-    return this.videoService.getVideo({ videoId: uuid })
-               .pipe(
-                 switchMap(video => {
-                   return forkJoin([
-                     this.videoService
-                         .loadCompleteDescription(video.descriptionPath)
-                         .pipe(map(description => Object.assign(video, { description }))),
-
-                     this.videoChannelService
-                         .listAccountVideoChannels(video.account)
-                         .pipe(
-                           map(result => result.data),
-                           map(videoChannels => videoChannels.map(c => ({ id: c.id, label: c.displayName, support: c.support })))
-                         ),
-
-                     this.videoCaptionService
-                         .listCaptions(video.id)
-                         .pipe(
-                           map(result => result.data)
-                         )
-                   ])
-                 }),
-                 map(([ video, videoChannels, videoCaptions ]) => ({ video, videoChannels, videoCaptions }))
-               )
-  }
-}
diff --git a/client/src/app/videos/+video-watch/comment/video-comment-add.component.html b/client/src/app/videos/+video-watch/comment/video-comment-add.component.html
deleted file mode 100644
index 9b43d91da..000000000
--- a/client/src/app/videos/+video-watch/comment/video-comment-add.component.html
+++ /dev/null
@@ -1,56 +0,0 @@
-<form novalidate [formGroup]="form" (ngSubmit)="formValidated()">
-  <div class="avatar-and-textarea">
-    <img [src]="getAvatarUrl()" alt="Avatar" />
-
-    <div class="form-group">
-      <textarea i18n-placeholder placeholder="Add comment..." myAutoResize
-                [readonly]="(user === null) ? true : false"
-                (click)="openVisitorModal($event)"
-                formControlName="text" [ngClass]="{ 'input-error': formErrors['text'] }"
-                (keyup.control.enter)="onValidKey()" (keyup.meta.enter)="onValidKey()" #textarea>
-
-      </textarea>
-      <div *ngIf="formErrors.text" class="form-error">
-        {{ formErrors.text }}
-      </div>
-    </div>
-  </div>
-
-  <div class="comment-buttons">
-    <button *ngIf="isAddButtonDisplayed()" class="cancel-button" (click)="cancelCommentReply()" type="button" i18n>
-      Cancel
-    </button>
-    <button *ngIf="isAddButtonDisplayed()" [ngClass]="{ disabled: !form.valid || addingComment }" i18n>
-      Reply
-    </button>
-  </div>
-</form>
-
-<ng-template #visitorModal let-modal>
-  <div class="modal-header">
-    <h4 class="modal-title" id="modal-basic-title" i18n>You are one step away from commenting</h4>
-    <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hideVisitorModal()"></my-global-icon>
-  </div>
-  <div class="modal-body">
-    <span i18n>
-      You can comment using an account on any ActivityPub-compatible instance.
-      On most platforms, you can find the video by typing its URL in the search bar and then comment it
-      from within the software's interface.
-    </span>
-    <span i18n>
-      If you have an account on Mastodon or Pleroma, you can open it directly in their interface:
-    </span>
-    <my-remote-subscribe [interact]="true" [uri]="getUri()"></my-remote-subscribe>
-  </div>
-  <div class="modal-footer inputs">
-    <input
-      type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
-      (click)="hideVisitorModal()" (key.enter)="hideVisitorModal()"
-    >
-
-    <input
-      type="submit" i18n-value value="Login to comment" class="action-button-submit"
-      (click)="gotoLogin()"
-    >
-  </div>
-</ng-template>
diff --git a/client/src/app/videos/+video-watch/comment/video-comment-add.component.scss b/client/src/app/videos/+video-watch/comment/video-comment-add.component.scss
deleted file mode 100644
index b3725ab94..000000000
--- a/client/src/app/videos/+video-watch/comment/video-comment-add.component.scss
+++ /dev/null
@@ -1,82 +0,0 @@
-@import '_variables';
-@import '_mixins';
-
-form {
-  margin-bottom: 30px;
-}
-
-.avatar-and-textarea {
-  display: flex;
-  margin-bottom: 10px;
-
-  img {
-    @include avatar(25px);
-
-    vertical-align: top;
-    margin-right: 10px;
-  }
-
-  .form-group {
-    flex-grow: 1;
-    margin: 0;
-
-    textarea {
-      @include peertube-textarea(100%, 60px);
-
-      &:focus::placeholder {
-        opacity: 0;
-      }
-    }
-  }
-}
-
-.comment-buttons {
-  display: flex;
-  justify-content: flex-end;
-
-  button {
-    @include peertube-button;
-    @include disable-outline;
-    @include disable-default-a-behaviour;
-
-    &:not(:last-child) {
-      margin-right: .5rem;
-    }
-
-    &:last-child {
-      @include orange-button;
-    }
-  }
-
-  .cancel-button {
-    @include tertiary-button;
-
-    font-weight: $font-semibold;
-    display: inline-block;
-    padding: 0 10px 0 10px;
-    white-space: nowrap;
-    background: transparent;
-  }
-}
-
-@media screen and (max-width: 600px) {
-  textarea, .comment-buttons button {
-    font-size: 14px !important;
-  }
-
-  textarea {
-    padding: 5px !important;
-  }
-}
-
-.modal-body {
-  .btn {
-    @include peertube-button;
-    @include orange-button;
-  }
-
-  span {
-    float: left;
-    margin-bottom: 20px;
-  }
-}
diff --git a/client/src/app/videos/+video-watch/comment/video-comment-add.component.ts b/client/src/app/videos/+video-watch/comment/video-comment-add.component.ts
deleted file mode 100644
index 79505c779..000000000
--- a/client/src/app/videos/+video-watch/comment/video-comment-add.component.ts
+++ /dev/null
@@ -1,149 +0,0 @@
-import { Observable } from 'rxjs'
-import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core'
-import { Router } from '@angular/router'
-import { Notifier, User } from '@app/core'
-import { FormReactive, FormValidatorService, VideoCommentValidatorsService } from '@app/shared/shared-forms'
-import { Video } from '@app/shared/shared-main'
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { VideoCommentCreate } from '@shared/models'
-import { VideoComment } from './video-comment.model'
-import { VideoCommentService } from './video-comment.service'
-
-@Component({
-  selector: 'my-video-comment-add',
-  templateUrl: './video-comment-add.component.html',
-  styleUrls: ['./video-comment-add.component.scss']
-})
-export class VideoCommentAddComponent extends FormReactive implements OnInit {
-  @Input() user: User
-  @Input() video: Video
-  @Input() parentComment: VideoComment
-  @Input() parentComments: VideoComment[]
-  @Input() focusOnInit = false
-
-  @Output() commentCreated = new EventEmitter<VideoComment>()
-  @Output() cancel = new EventEmitter()
-
-  @ViewChild('visitorModal', { static: true }) visitorModal: NgbModal
-  @ViewChild('textarea', { static: true }) textareaElement: ElementRef
-
-  addingComment = false
-
-  constructor (
-    protected formValidatorService: FormValidatorService,
-    private videoCommentValidatorsService: VideoCommentValidatorsService,
-    private notifier: Notifier,
-    private videoCommentService: VideoCommentService,
-    private modalService: NgbModal,
-    private router: Router
-  ) {
-    super()
-  }
-
-  ngOnInit () {
-    this.buildForm({
-      text: this.videoCommentValidatorsService.VIDEO_COMMENT_TEXT
-    })
-
-    if (this.user) {
-      if (this.focusOnInit === true) {
-        this.textareaElement.nativeElement.focus()
-      }
-
-      if (this.parentComment) {
-        const mentions = this.parentComments
-          .filter(c => c.account && c.account.id !== this.user.account.id) // Don't add mention of ourselves
-          .map(c => '@' + c.by)
-
-        const mentionsSet = new Set(mentions)
-        const mentionsText = Array.from(mentionsSet).join(' ') + ' '
-
-        this.form.patchValue({ text: mentionsText })
-      }
-    }
-  }
-
-  onValidKey () {
-    this.check()
-    if (!this.form.valid) return
-
-    this.formValidated()
-  }
-
-  openVisitorModal (event: any) {
-    if (this.user === null) { // we only open it for visitors
-      // fixing ng-bootstrap ModalService and the "Expression Changed After It Has Been Checked" Error
-      event.srcElement.blur()
-      event.preventDefault()
-
-      this.modalService.open(this.visitorModal)
-    }
-  }
-
-  hideVisitorModal () {
-    this.modalService.dismissAll()
-  }
-
-  formValidated () {
-    // If we validate very quickly the comment form, we might comment twice
-    if (this.addingComment) return
-
-    this.addingComment = true
-
-    const commentCreate: VideoCommentCreate = this.form.value
-    let obs: Observable<VideoComment>
-
-    if (this.parentComment) {
-      obs = this.addCommentReply(commentCreate)
-    } else {
-      obs = this.addCommentThread(commentCreate)
-    }
-
-    obs.subscribe(
-      comment => {
-        this.addingComment = false
-        this.commentCreated.emit(comment)
-        this.form.reset()
-      },
-
-      err => {
-        this.addingComment = false
-
-        this.notifier.error(err.text)
-      }
-    )
-  }
-
-  isAddButtonDisplayed () {
-    return this.form.value['text']
-  }
-
-  getUri () {
-    return window.location.href
-  }
-
-  getAvatarUrl () {
-    if (this.user) return this.user.accountAvatarUrl
-    return window.location.origin + '/client/assets/images/default-avatar.png'
-  }
-
-  gotoLogin () {
-    this.hideVisitorModal()
-    this.router.navigate([ '/login' ])
-  }
-
-  cancelCommentReply () {
-    this.cancel.emit(null)
-    this.form.value['text'] = this.textareaElement.nativeElement.value = ''
-  }
-
-  private addCommentReply (commentCreate: VideoCommentCreate) {
-    return this.videoCommentService
-      .addCommentReply(this.video.id, this.parentComment.id, commentCreate)
-  }
-
-  private addCommentThread (commentCreate: VideoCommentCreate) {
-    return this.videoCommentService
-      .addCommentThread(this.video.id, commentCreate)
-  }
-}
diff --git a/client/src/app/videos/+video-watch/comment/video-comment-thread-tree.model.ts b/client/src/app/videos/+video-watch/comment/video-comment-thread-tree.model.ts
deleted file mode 100644
index 7c2aaeadd..000000000
--- a/client/src/app/videos/+video-watch/comment/video-comment-thread-tree.model.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { VideoCommentThreadTree as VideoCommentThreadTreeServerModel } from '@shared/models'
-import { VideoComment } from './video-comment.model'
-
-export class VideoCommentThreadTree implements VideoCommentThreadTreeServerModel {
-  comment: VideoComment
-  children: VideoCommentThreadTree[]
-}
diff --git a/client/src/app/videos/+video-watch/comment/video-comment.component.html b/client/src/app/videos/+video-watch/comment/video-comment.component.html
deleted file mode 100644
index 002de57e4..000000000
--- a/client/src/app/videos/+video-watch/comment/video-comment.component.html
+++ /dev/null
@@ -1,95 +0,0 @@
-<div class="root-comment">
-  <div class="left">
-    <a *ngIf="!comment.isDeleted" [href]="comment.account.url" target="_blank" rel="noopener noreferrer">
-      <img
-        class="comment-avatar"
-        [src]="comment.accountAvatarUrl"
-        (error)="switchToDefaultAvatar($event)"
-        alt="Avatar"
-      />
-    </a>
-
-    <div class="vertical-border"></div>
-  </div>
-
-  <div class="right" [ngClass]="{ 'mb-3': firstInThread }">
-    <span *ngIf="comment.isDeleted" class="comment-avatar"></span>
-
-    <div class="comment">
-      <ng-container *ngIf="!comment.isDeleted">
-        <div *ngIf="highlightedComment === true" class="highlighted-comment" i18n>Highlighted comment</div>
-
-        <div class="comment-account-date">
-          <div class="comment-account">
-            <a
-              [routerLink]="[ '/accounts', comment.by ]"
-              class="comment-account-name" [ngClass]="{ 'video-author': video.account.id === comment.account.id }"
-            >
-              {{ comment.account.displayName }}
-            </a>
-
-            <a [href]="comment.account.url" target="_blank" rel="noopener noreferrer" class="comment-account-fid ml-1">{{ comment.by }}</a>
-          </div>
-          <a [routerLink]="['/videos/watch', video.uuid, { 'threadId': comment.threadId }]"
-             class="comment-date" [title]="comment.createdAt">{{ comment.createdAt | myFromNow }}</a>
-        </div>
-        <div
-          class="comment-html"
-          [innerHTML]="sanitizedCommentHTML"
-          (timestampClicked)="handleTimestampClicked($event)"
-          timestampRouteTransformer
-        ></div>
-
-        <div class="comment-actions">
-          <div *ngIf="isUserLoggedIn()" (click)="onWantToReply()" class="comment-action-reply" i18n>Reply</div>
-          <div *ngIf="isRemovableByUser()" (click)="onWantToDelete()" class="comment-action-delete" i18n>Delete</div>
-
-          <my-user-moderation-dropdown
-            buttonSize="small" [account]="commentAccount" [user]="commentUser" i18n-label label="Options" placement="bottom-left auto"
-          ></my-user-moderation-dropdown>
-        </div>
-      </ng-container>
-
-      <ng-container *ngIf="comment.isDeleted">
-        <div class="comment-account-date">
-          <span class="comment-account" i18n>Deleted</span>
-          <a [routerLink]="['/videos/watch', video.uuid, { 'threadId': comment.threadId }]"
-             class="comment-date">{{ comment.createdAt | myFromNow }}</a>
-        </div>
-
-        <div *ngIf="comment.isDeleted" class="comment-html comment-html-deleted">
-          <i i18n>This comment has been deleted</i>
-        </div>
-      </ng-container>
-
-      <my-video-comment-add
-        *ngIf="!comment.isDeleted && isUserLoggedIn() && inReplyToCommentId === comment.id"
-        [user]="user"
-        [video]="video"
-        [parentComment]="comment"
-        [parentComments]="newParentComments"
-        [focusOnInit]="true"
-        (commentCreated)="onCommentReplyCreated($event)"
-        (cancel)="onResetReply()"
-      ></my-video-comment-add>
-
-      <div *ngIf="commentTree" class="children">
-        <div *ngFor="let commentChild of commentTree.children">
-          <my-video-comment
-            [comment]="commentChild.comment"
-            [video]="video"
-            [inReplyToCommentId]="inReplyToCommentId"
-            [commentTree]="commentChild"
-            [parentComments]="newParentComments"
-            (wantedToReply)="onWantToReply($event)"
-            (wantedToDelete)="onWantToDelete($event)"
-            (resetReply)="onResetReply()"
-            (timestampClicked)="handleTimestampClicked($event)"
-          ></my-video-comment>
-        </div>
-      </div>
-
-      <ng-content></ng-content>
-    </div>
-  </div>
-</div>
diff --git a/client/src/app/videos/+video-watch/comment/video-comment.component.scss b/client/src/app/videos/+video-watch/comment/video-comment.component.scss
deleted file mode 100644
index e7ef79561..000000000
--- a/client/src/app/videos/+video-watch/comment/video-comment.component.scss
+++ /dev/null
@@ -1,189 +0,0 @@
-@import '_variables';
-@import '_mixins';
-
-.root-comment {
-  font-size: 15px;
-  display: flex;
-
-  .left {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    margin-right: 10px;
-
-    .vertical-border {
-      width: 2px;
-      height: 100%;
-      background-color: rgba(0, 0, 0, 0.05);
-      margin: 10px calc(1rem + 1px);
-    }
-  }
-
-  .right {
-    width: 100%;
-  }
-
-  .comment-avatar {
-    @include avatar(36px);
-  }
-
-  .comment {
-    flex-grow: 1;
-    // Fix word-wrap with flex
-    min-width: 1px;
-
-    .highlighted-comment {
-      display: inline-block;
-      background-color: #F5F5F5;
-      color: #3d3d3d;
-      padding: 0 5px;
-      font-size: 13px;
-      margin-bottom: 5px;
-      font-weight: $font-semibold;
-      border-radius: 3px;
-    }
-
-    .comment-account-date {
-      display: flex;
-      margin-bottom: 4px;
-
-      .video-author {
-        height: 20px;
-        background-color: #888888;
-        border-radius: 12px;
-        margin-bottom: 2px;
-        max-width: 100%;
-        box-sizing: border-box;
-        flex-direction: row;
-        align-items: center;
-        display: inline-flex;
-        padding-right: 6px;
-        padding-left: 6px;
-        color: white !important;
-      }
-
-      .comment-account {
-        word-break: break-all;
-        font-weight: 600;
-        font-size: 90%;
-
-        a {
-          @include disable-default-a-behaviour;
-
-          color: pvar(--mainForegroundColor);
-        }
-
-        .comment-account-fid {
-          opacity: .6;
-        }
-      }
-
-      .comment-date {
-        font-size: 90%;
-        color: pvar(--greyForegroundColor);
-        margin-left: 5px;
-        text-decoration: none;
-      }
-    }
-
-    .comment-html {
-      @include peertube-word-wrap;
-
-      // Mentions
-      ::ng-deep a {
-
-        &:not(.linkified-url) {
-          @include disable-default-a-behaviour;
-
-          color: pvar(--mainForegroundColor);
-
-          font-weight: $font-semibold;
-        }
-
-      }
-
-      // Paragraphs
-      ::ng-deep p {
-        margin-bottom: .3rem;
-      }
-
-      &.comment-html-deleted {
-        color: pvar(--greyForegroundColor);
-        margin-bottom: 1rem;
-      }
-    }
-
-    .comment-actions {
-      margin-bottom: 10px;
-      display: flex;
-
-      ::ng-deep .dropdown-toggle,
-      .comment-action-reply,
-      .comment-action-delete {
-        color: pvar(--greyForegroundColor);
-        cursor: pointer;
-        margin-right: 10px;
-
-        &:hover {
-          color: pvar(--mainForegroundColor);
-        }
-      }
-
-      ::ng-deep .action-button {
-        background-color: transparent;
-        padding: 0;
-        font-weight: unset;
-      }
-    }
-
-    my-video-comment-add {
-      ::ng-deep form {
-        margin-top: 1rem;
-        margin-bottom: 0;
-      }
-    }
-  }
-
-  .children {
-    // Reduce avatars size for replies
-    .comment-avatar {
-      @include avatar(25px);
-    }
-
-    .left {
-      margin-right: 6px;
-    }
-  }
-}
-
-@media screen and (max-width: 1200px) {
-  .children {
-    margin-left: -10px;
-  }
-}
-
-@media screen and (max-width: 600px) {
-  .root-comment {
-    .children {
-      margin-left: -20px;
-
-      .left {
-        align-items: flex-start;
-
-        .vertical-border {
-          margin-left: 2px;
-        }
-      }
-    }
-
-    .comment {
-      .comment-account-date {
-        flex-direction: column;
-
-        .comment-date {
-          margin-left: 0;
-        }
-      }
-    }
-  }
-}
diff --git a/client/src/app/videos/+video-watch/comment/video-comment.component.ts b/client/src/app/videos/+video-watch/comment/video-comment.component.ts
deleted file mode 100644
index 27846c1ad..000000000
--- a/client/src/app/videos/+video-watch/comment/video-comment.component.ts
+++ /dev/null
@@ -1,131 +0,0 @@
-import { Component, EventEmitter, Input, OnChanges, OnInit, Output } from '@angular/core'
-import { MarkdownService, Notifier, UserService } from '@app/core'
-import { AuthService } from '@app/core/auth'
-import { Account, Actor, Video } from '@app/shared/shared-main'
-import { User, UserRight } from '@shared/models'
-import { VideoCommentThreadTree } from './video-comment-thread-tree.model'
-import { VideoComment } from './video-comment.model'
-
-@Component({
-  selector: 'my-video-comment',
-  templateUrl: './video-comment.component.html',
-  styleUrls: ['./video-comment.component.scss']
-})
-export class VideoCommentComponent implements OnInit, OnChanges {
-  @Input() video: Video
-  @Input() comment: VideoComment
-  @Input() parentComments: VideoComment[] = []
-  @Input() commentTree: VideoCommentThreadTree
-  @Input() inReplyToCommentId: number
-  @Input() highlightedComment = false
-  @Input() firstInThread = false
-
-  @Output() wantedToDelete = new EventEmitter<VideoComment>()
-  @Output() wantedToReply = new EventEmitter<VideoComment>()
-  @Output() threadCreated = new EventEmitter<VideoCommentThreadTree>()
-  @Output() resetReply = new EventEmitter()
-  @Output() timestampClicked = new EventEmitter<number>()
-
-  sanitizedCommentHTML = ''
-  newParentComments: VideoComment[] = []
-
-  commentAccount: Account
-  commentUser: User
-
-  constructor (
-    private markdownService: MarkdownService,
-    private authService: AuthService,
-    private userService: UserService,
-    private notifier: Notifier
-  ) {}
-
-  get user () {
-    return this.authService.getUser()
-  }
-
-  ngOnInit () {
-    this.init()
-  }
-
-  ngOnChanges () {
-    this.init()
-  }
-
-  onCommentReplyCreated (createdComment: VideoComment) {
-    if (!this.commentTree) {
-      this.commentTree = {
-        comment: this.comment,
-        children: []
-      }
-
-      this.threadCreated.emit(this.commentTree)
-    }
-
-    this.commentTree.children.unshift({
-      comment: createdComment,
-      children: []
-    })
-    this.resetReply.emit()
-  }
-
-  onWantToReply (comment?: VideoComment) {
-    this.wantedToReply.emit(comment || this.comment)
-  }
-
-  onWantToDelete (comment?: VideoComment) {
-    this.wantedToDelete.emit(comment || this.comment)
-  }
-
-  isUserLoggedIn () {
-    return this.authService.isLoggedIn()
-  }
-
-  onResetReply () {
-    this.resetReply.emit()
-  }
-
-  handleTimestampClicked (timestamp: number) {
-    this.timestampClicked.emit(timestamp)
-  }
-
-  isRemovableByUser () {
-    return this.comment.account && this.isUserLoggedIn() &&
-      (
-        this.user.account.id === this.comment.account.id ||
-        this.user.account.id === this.video.account.id ||
-        this.user.hasRight(UserRight.REMOVE_ANY_VIDEO_COMMENT)
-      )
-  }
-
-  switchToDefaultAvatar ($event: Event) {
-    ($event.target as HTMLImageElement).src = Actor.GET_DEFAULT_AVATAR_URL()
-  }
-
-  private getUserIfNeeded (account: Account) {
-    if (!account.userId) return
-    if (!this.authService.isLoggedIn()) return
-
-    const user = this.authService.getUser()
-    if (user.hasRight(UserRight.MANAGE_USERS)) {
-      this.userService.getUserWithCache(account.userId)
-          .subscribe(
-            user => this.commentUser = user,
-
-            err => this.notifier.error(err.message)
-          )
-    }
-  }
-
-  private async init () {
-    const html = await this.markdownService.textMarkdownToHTML(this.comment.text, true)
-    this.sanitizedCommentHTML = await this.markdownService.processVideoTimestamps(html)
-    this.newParentComments = this.parentComments.concat([ this.comment ])
-
-    if (this.comment.account) {
-      this.commentAccount = new Account(this.comment.account)
-      this.getUserIfNeeded(this.commentAccount)
-    } else {
-      this.comment.account = null
-    }
-  }
-}
diff --git a/client/src/app/videos/+video-watch/comment/video-comment.model.ts b/client/src/app/videos/+video-watch/comment/video-comment.model.ts
deleted file mode 100644
index e85443196..000000000
--- a/client/src/app/videos/+video-watch/comment/video-comment.model.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import { getAbsoluteAPIUrl } from '@app/helpers'
-import { Actor } from '@app/shared/shared-main'
-import { Account as AccountInterface, VideoComment as VideoCommentServerModel } from '@shared/models'
-
-export class VideoComment implements VideoCommentServerModel {
-  id: number
-  url: string
-  text: string
-  threadId: number
-  inReplyToCommentId: number
-  videoId: number
-  createdAt: Date | string
-  updatedAt: Date | string
-  deletedAt: Date | string
-  isDeleted: boolean
-  account: AccountInterface
-  totalRepliesFromVideoAuthor: number
-  totalReplies: number
-  by: string
-  accountAvatarUrl: string
-
-  isLocal: boolean
-
-  constructor (hash: VideoCommentServerModel) {
-    this.id = hash.id
-    this.url = hash.url
-    this.text = hash.text
-    this.threadId = hash.threadId
-    this.inReplyToCommentId = hash.inReplyToCommentId
-    this.videoId = hash.videoId
-    this.createdAt = new Date(hash.createdAt.toString())
-    this.updatedAt = new Date(hash.updatedAt.toString())
-    this.deletedAt = hash.deletedAt ? new Date(hash.deletedAt.toString()) : null
-    this.isDeleted = hash.isDeleted
-    this.account = hash.account
-    this.totalRepliesFromVideoAuthor = hash.totalRepliesFromVideoAuthor
-    this.totalReplies = hash.totalReplies
-
-    if (this.account) {
-      this.by = Actor.CREATE_BY_STRING(this.account.name, this.account.host)
-      this.accountAvatarUrl = Actor.GET_ACTOR_AVATAR_URL(this.account)
-
-      const absoluteAPIUrl = getAbsoluteAPIUrl()
-      const thisHost = new URL(absoluteAPIUrl).host
-      this.isLocal = this.account.host.trim() === thisHost
-    }
-  }
-}
diff --git a/client/src/app/videos/+video-watch/comment/video-comment.service.ts b/client/src/app/videos/+video-watch/comment/video-comment.service.ts
deleted file mode 100644
index a73fb9ca8..000000000
--- a/client/src/app/videos/+video-watch/comment/video-comment.service.ts
+++ /dev/null
@@ -1,149 +0,0 @@
-import { Observable } from 'rxjs'
-import { catchError, map } from 'rxjs/operators'
-import { HttpClient, HttpParams } from '@angular/common/http'
-import { Injectable } from '@angular/core'
-import { ComponentPaginationLight, RestExtractor, RestService } from '@app/core'
-import { objectLineFeedToHtml } from '@app/helpers'
-import {
-  FeedFormat,
-  ResultList,
-  VideoComment as VideoCommentServerModel,
-  VideoCommentCreate,
-  VideoCommentThreadTree as VideoCommentThreadTreeServerModel
-} from '@shared/models'
-import { environment } from '../../../../environments/environment'
-import { VideoCommentThreadTree } from './video-comment-thread-tree.model'
-import { VideoComment } from './video-comment.model'
-
-@Injectable()
-export class VideoCommentService {
-  private static BASE_VIDEO_URL = environment.apiUrl + '/api/v1/videos/'
-  private static BASE_FEEDS_URL = environment.apiUrl + '/feeds/video-comments.'
-
-  constructor (
-    private authHttp: HttpClient,
-    private restExtractor: RestExtractor,
-    private restService: RestService
-  ) {}
-
-  addCommentThread (videoId: number | string, comment: VideoCommentCreate) {
-    const url = VideoCommentService.BASE_VIDEO_URL + videoId + '/comment-threads'
-    const normalizedComment = objectLineFeedToHtml(comment, 'text')
-
-    return this.authHttp.post<{ comment: VideoCommentServerModel }>(url, normalizedComment)
-               .pipe(
-                  map(data => this.extractVideoComment(data.comment)),
-                  catchError(err => this.restExtractor.handleError(err))
-               )
-  }
-
-  addCommentReply (videoId: number | string, inReplyToCommentId: number, comment: VideoCommentCreate) {
-    const url = VideoCommentService.BASE_VIDEO_URL + videoId + '/comments/' + inReplyToCommentId
-    const normalizedComment = objectLineFeedToHtml(comment, 'text')
-
-    return this.authHttp.post<{ comment: VideoCommentServerModel }>(url, normalizedComment)
-               .pipe(
-                 map(data => this.extractVideoComment(data.comment)),
-                 catchError(err => this.restExtractor.handleError(err))
-               )
-  }
-
-  getVideoCommentThreads (parameters: {
-    videoId: number | string,
-    componentPagination: ComponentPaginationLight,
-    sort: string
-  }): Observable<ResultList<VideoComment>> {
-    const { videoId, componentPagination, sort } = parameters
-
-    const pagination = this.restService.componentPaginationToRestPagination(componentPagination)
-
-    let params = new HttpParams()
-    params = this.restService.addRestGetParams(params, pagination, sort)
-
-    const url = VideoCommentService.BASE_VIDEO_URL + videoId + '/comment-threads'
-    return this.authHttp.get<ResultList<VideoComment>>(url, { params })
-               .pipe(
-                 map(result => this.extractVideoComments(result)),
-                 catchError(err => this.restExtractor.handleError(err))
-               )
-  }
-
-  getVideoThreadComments (parameters: {
-    videoId: number | string,
-    threadId: number
-  }): Observable<VideoCommentThreadTree> {
-    const { videoId, threadId } = parameters
-    const url = `${VideoCommentService.BASE_VIDEO_URL + videoId}/comment-threads/${threadId}`
-
-    return this.authHttp
-               .get<VideoCommentThreadTreeServerModel>(url)
-               .pipe(
-                 map(tree => this.extractVideoCommentTree(tree)),
-                 catchError(err => this.restExtractor.handleError(err))
-               )
-  }
-
-  deleteVideoComment (videoId: number | string, commentId: number) {
-    const url = `${VideoCommentService.BASE_VIDEO_URL + videoId}/comments/${commentId}`
-
-    return this.authHttp
-               .delete(url)
-               .pipe(
-                 map(this.restExtractor.extractDataBool),
-                 catchError(err => this.restExtractor.handleError(err))
-               )
-  }
-
-  getVideoCommentsFeeds (videoUUID?: string) {
-    const feeds = [
-      {
-        format: FeedFormat.RSS,
-        label: 'rss 2.0',
-        url: VideoCommentService.BASE_FEEDS_URL + FeedFormat.RSS.toLowerCase()
-      },
-      {
-        format: FeedFormat.ATOM,
-        label: 'atom 1.0',
-        url: VideoCommentService.BASE_FEEDS_URL + FeedFormat.ATOM.toLowerCase()
-      },
-      {
-        format: FeedFormat.JSON,
-        label: 'json 1.0',
-        url: VideoCommentService.BASE_FEEDS_URL + FeedFormat.JSON.toLowerCase()
-      }
-    ]
-
-    if (videoUUID !== undefined) {
-      for (const feed of feeds) {
-        feed.url += '?videoId=' + videoUUID
-      }
-    }
-
-    return feeds
-  }
-
-  private extractVideoComment (videoComment: VideoCommentServerModel) {
-    return new VideoComment(videoComment)
-  }
-
-  private extractVideoComments (result: ResultList<VideoCommentServerModel>) {
-    const videoCommentsJson = result.data
-    const totalComments = result.total
-    const comments: VideoComment[] = []
-
-    for (const videoCommentJson of videoCommentsJson) {
-      comments.push(new VideoComment(videoCommentJson))
-    }
-
-    return { data: comments, total: totalComments }
-  }
-
-  private extractVideoCommentTree (tree: VideoCommentThreadTreeServerModel) {
-    if (!tree) return tree as VideoCommentThreadTree
-
-    tree.comment = new VideoComment(tree.comment)
-    tree.children.forEach(c => this.extractVideoCommentTree(c))
-
-    return tree as VideoCommentThreadTree
-  }
-}
diff --git a/client/src/app/videos/+video-watch/comment/video-comments.component.html b/client/src/app/videos/+video-watch/comment/video-comments.component.html
deleted file mode 100644
index dd1d43560..000000000
--- a/client/src/app/videos/+video-watch/comment/video-comments.component.html
+++ /dev/null
@@ -1,98 +0,0 @@
-<div>
-  <div class="title-block">
-    <h2 class="title-page title-page-single">
-      <ng-container *ngIf="componentPagination.totalItems > 0; then hasComments; else noComments"></ng-container>
-      <ng-template #hasComments>
-        <ng-container i18n *ngIf="componentPagination.totalItems === 1; else manyComments">1 Comment</ng-container>
-        <ng-template i18n #manyComments>{{ componentPagination.totalItems }} Comments</ng-template>
-      </ng-template>
-      <ng-template i18n #noComments>Comments</ng-template>
-    </h2>
-
-    <my-feed [syndicationItems]="syndicationItems"></my-feed>
-
-    <div ngbDropdown class="d-inline-block ml-4">
-      <button class="btn btn-sm btn-outline-secondary" id="dropdown-sort-comments" ngbDropdownToggle i18n>
-        SORT BY
-      </button>
-      <div ngbDropdownMenu aria-labelledby="dropdown-sort-comments">
-        <button (click)="handleSortChange('-createdAt')" ngbDropdownItem i18n>Most recent first (default)</button>
-        <button (click)="handleSortChange('-totalReplies')" ngbDropdownItem i18n>Most replies first</button>
-      </div>
-    </div>
-  </div>
-
-  <ng-template [ngIf]="video.commentsEnabled === true">
-    <my-video-comment-add
-      [video]="video"
-      [user]="user"
-      (commentCreated)="onCommentThreadCreated($event)"
-    ></my-video-comment-add>
-
-    <div *ngIf="componentPagination.totalItems === 0 && comments.length === 0" i18n>No comments.</div>
-
-    <div
-      class="comment-threads"
-      myInfiniteScroller
-      [autoInit]="true"
-      (nearOfBottom)="onNearOfBottom()"
-      [dataObservable]="onDataSubject.asObservable()"
-    >
-      <div>
-        <div class="anchor" #commentHighlightBlock id="highlighted-comment"></div>
-        <my-video-comment
-          *ngIf="highlightedThread"
-          [comment]="highlightedThread"
-          [video]="video"
-          [inReplyToCommentId]="inReplyToCommentId"
-          [commentTree]="threadComments[highlightedThread.id]"
-          [highlightedComment]="true"
-          [firstInThread]="true"
-          (wantedToReply)="onWantedToReply($event)"
-          (wantedToDelete)="onWantedToDelete($event)"
-          (threadCreated)="onThreadCreated($event)"
-          (resetReply)="onResetReply()"
-          (timestampClicked)="handleTimestampClicked($event)"
-        ></my-video-comment>
-      </div>
-
-      <div *ngFor="let comment of comments; index as i">
-        <my-video-comment
-          *ngIf="!highlightedThread || comment.id !== highlightedThread.id"
-          [comment]="comment"
-          [video]="video"
-          [inReplyToCommentId]="inReplyToCommentId"
-          [commentTree]="threadComments[comment.id]"
-          [firstInThread]="i + 1 !== comments.length"
-          (wantedToReply)="onWantedToReply($event)"
-          (wantedToDelete)="onWantedToDelete($event)"
-          (threadCreated)="onThreadCreated($event)"
-          (resetReply)="onResetReply()"
-          (timestampClicked)="handleTimestampClicked($event)"
-        >
-          <div *ngIf="comment.totalReplies !== 0 && !threadComments[comment.id]" (click)="viewReplies(comment.id)" class="view-replies mb-2">
-            <span class="glyphicon glyphicon-menu-down"></span>
-
-            <ng-container *ngIf="comment.totalRepliesFromVideoAuthor > 0; then hasAuthorComments; else noAuthorComments"></ng-container>
-            <ng-template #hasAuthorComments>
-              <ng-container *ngIf="comment.totalReplies !== comment.totalRepliesFromVideoAuthor; else onlyAuthorComments" i18n>
-                View {{ comment.totalReplies }} replies from {{ video?.account?.displayName || 'the author' }} and others
-              </ng-container>
-              <ng-template i18n #onlyAuthorComments>
-                View {{ comment.totalReplies }} replies from {{ video?.account?.displayName || 'the author' }}
-              </ng-template>
-            </ng-template>
-            <ng-template i18n #noAuthorComments>View {{ comment.totalReplies }} replies</ng-template>
-
-            <my-small-loader class="comment-thread-loading ml-1" [loading]="threadLoading[comment.id]"></my-small-loader>
-          </div>
-        </my-video-comment>
-
-      </div>
-    </div>
-  </ng-template>
-
-  <div *ngIf="video.commentsEnabled === false" i18n>
-    Comments are disabled.
-  </div>
-</div>
diff --git a/client/src/app/videos/+video-watch/comment/video-comments.component.scss b/client/src/app/videos/+video-watch/comment/video-comments.component.scss
deleted file mode 100644
index df42fae73..000000000
--- a/client/src/app/videos/+video-watch/comment/video-comments.component.scss
+++ /dev/null
@@ -1,53 +0,0 @@
-@import '_variables';
-@import '_mixins';
-
-#highlighted-comment {
-  margin-bottom: 25px;
-}
-
-.view-replies {
-  font-weight: $font-semibold;
-  font-size: 15px;
-  cursor: pointer;
-}
-
-.glyphicon, .comment-thread-loading {
-  margin-right: 5px;
-  display: inline-block;
-  font-size: 13px;
-}
-
-.title-block {
-  .title-page {
-    margin-right: 0;
-  }
-
-  my-feed {
-    display: inline-block;
-    margin-left: 5px;
-    opacity: 0;
-    transition: ease-in .2s opacity;
-  }
-  &:hover my-feed {
-    opacity: 1;
-  }
-}
-
-#dropdown-sort-comments {
-  font-weight: 600;
-  text-transform: uppercase;
-  border: none;
-  transform: translateY(-7%);
-}
-
-@media screen and (max-width: 600px) {
-  .view-replies {
-    margin-left: 46px;
-  }
-}
-
-@media screen and (max-width: 450px) {
-  .view-replies {
-    font-size: 14px;
-  }
-}
diff --git a/client/src/app/videos/+video-watch/comment/video-comments.component.ts b/client/src/app/videos/+video-watch/comment/video-comments.component.ts
deleted file mode 100644
index df0018ec6..000000000
--- a/client/src/app/videos/+video-watch/comment/video-comments.component.ts
+++ /dev/null
@@ -1,232 +0,0 @@
-import { Subject, Subscription } from 'rxjs'
-import { Component, ElementRef, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core'
-import { ActivatedRoute } from '@angular/router'
-import { AuthService, ComponentPagination, ConfirmService, hasMoreItems, Notifier, User } from '@app/core'
-import { HooksService } from '@app/core/plugins/hooks.service'
-import { Syndication, VideoDetails } from '@app/shared/shared-main'
-import { I18n } from '@ngx-translate/i18n-polyfill'
-import { VideoCommentThreadTree } from './video-comment-thread-tree.model'
-import { VideoComment } from './video-comment.model'
-import { VideoCommentService } from './video-comment.service'
-
-@Component({
-  selector: 'my-video-comments',
-  templateUrl: './video-comments.component.html',
-  styleUrls: ['./video-comments.component.scss']
-})
-export class VideoCommentsComponent implements OnInit, OnChanges, OnDestroy {
-  @ViewChild('commentHighlightBlock') commentHighlightBlock: ElementRef
-  @Input() video: VideoDetails
-  @Input() user: User
-
-  @Output() timestampClicked = new EventEmitter<number>()
-
-  comments: VideoComment[] = []
-  highlightedThread: VideoComment
-  sort = '-createdAt'
-  componentPagination: ComponentPagination = {
-    currentPage: 1,
-    itemsPerPage: 10,
-    totalItems: null
-  }
-  inReplyToCommentId: number
-  threadComments: { [ id: number ]: VideoCommentThreadTree } = {}
-  threadLoading: { [ id: number ]: boolean } = {}
-
-  syndicationItems: Syndication[] = []
-
-  onDataSubject = new Subject<any[]>()
-
-  private sub: Subscription
-
-  constructor (
-    private authService: AuthService,
-    private notifier: Notifier,
-    private confirmService: ConfirmService,
-    private videoCommentService: VideoCommentService,
-    private activatedRoute: ActivatedRoute,
-    private i18n: I18n,
-    private hooks: HooksService
-  ) {}
-
-  ngOnInit () {
-    // Find highlighted comment in params
-    this.sub = this.activatedRoute.params.subscribe(
-      params => {
-        if (params['threadId']) {
-          const highlightedThreadId = +params['threadId']
-          this.processHighlightedThread(highlightedThreadId)
-        }
-      }
-    )
-  }
-
-  ngOnChanges (changes: SimpleChanges) {
-    if (changes['video']) {
-      this.resetVideo()
-    }
-  }
-
-  ngOnDestroy () {
-    if (this.sub) this.sub.unsubscribe()
-  }
-
-  viewReplies (commentId: number, highlightThread = false) {
-    this.threadLoading[commentId] = true
-
-    const params = {
-      videoId: this.video.id,
-      threadId: commentId
-    }
-
-    const obs = this.hooks.wrapObsFun(
-      this.videoCommentService.getVideoThreadComments.bind(this.videoCommentService),
-      params,
-      'video-watch',
-      'filter:api.video-watch.video-thread-replies.list.params',
-      'filter:api.video-watch.video-thread-replies.list.result'
-    )
-
-    obs.subscribe(
-        res => {
-          this.threadComments[commentId] = res
-          this.threadLoading[commentId] = false
-          this.hooks.runAction('action:video-watch.video-thread-replies.loaded', 'video-watch', { data: res })
-
-          if (highlightThread) {
-            this.highlightedThread = new VideoComment(res.comment)
-
-            // Scroll to the highlighted thread
-            setTimeout(() => this.commentHighlightBlock.nativeElement.scrollIntoView(), 0)
-          }
-        },
-
-        err => this.notifier.error(err.message)
-      )
-  }
-
-  loadMoreThreads () {
-    const params = {
-      videoId: this.video.id,
-      componentPagination: this.componentPagination,
-      sort: this.sort
-    }
-
-    const obs = this.hooks.wrapObsFun(
-      this.videoCommentService.getVideoCommentThreads.bind(this.videoCommentService),
-      params,
-      'video-watch',
-      'filter:api.video-watch.video-threads.list.params',
-      'filter:api.video-watch.video-threads.list.result'
-    )
-
-    obs.subscribe(
-      res => {
-        this.comments = this.comments.concat(res.data)
-        this.componentPagination.totalItems = res.total
-
-        this.onDataSubject.next(res.data)
-        this.hooks.runAction('action:video-watch.video-threads.loaded', 'video-watch', { data: this.componentPagination })
-      },
-
-      err => this.notifier.error(err.message)
-    )
-  }
-
-  onCommentThreadCreated (comment: VideoComment) {
-    this.comments.unshift(comment)
-  }
-
-  onWantedToReply (comment: VideoComment) {
-    this.inReplyToCommentId = comment.id
-  }
-
-  onResetReply () {
-    this.inReplyToCommentId = undefined
-  }
-
-  onThreadCreated (commentTree: VideoCommentThreadTree) {
-    this.viewReplies(commentTree.comment.id)
-  }
-
-  handleSortChange (sort: string) {
-    if (this.sort === sort) return
-
-    this.sort = sort
-    this.resetVideo()
-  }
-
-  handleTimestampClicked (timestamp: number) {
-    this.timestampClicked.emit(timestamp)
-  }
-
-  async onWantedToDelete (commentToDelete: VideoComment) {
-    let message = 'Do you really want to delete this comment?'
-
-    if (commentToDelete.isLocal || this.video.isLocal) {
-      message += this.i18n(' The deletion will be sent to remote instances so they can reflect the change.')
-    } else {
-      message += this.i18n(' It is a remote comment, so the deletion will only be effective on your instance.')
-    }
-
-    const res = await this.confirmService.confirm(message, this.i18n('Delete'))
-    if (res === false) return
-
-    this.videoCommentService.deleteVideoComment(commentToDelete.videoId, commentToDelete.id)
-      .subscribe(
-        () => {
-          if (this.highlightedThread?.id === commentToDelete.id) {
-            commentToDelete = this.comments.find(c => c.id === commentToDelete.id)
-
-            this.highlightedThread = undefined
-          }
-
-          // Mark the comment as deleted
-          this.softDeleteComment(commentToDelete)
-        },
-
-        err => this.notifier.error(err.message)
-      )
-  }
-
-  isUserLoggedIn () {
-    return this.authService.isLoggedIn()
-  }
-
-  onNearOfBottom () {
-    if (hasMoreItems(this.componentPagination)) {
-      this.componentPagination.currentPage++
-      this.loadMoreThreads()
-    }
-  }
-
-  private softDeleteComment (comment: VideoComment) {
-    comment.isDeleted = true
-    comment.deletedAt = new Date()
-    comment.text = ''
-    comment.account = null
-  }
-
-  private resetVideo () {
-    if (this.video.commentsEnabled === true) {
-      // Reset all our fields
-      this.highlightedThread = null
-      this.comments = []
-      this.threadComments = {}
-      this.threadLoading = {}
-      this.inReplyToCommentId = undefined
-      this.componentPagination.currentPage = 1
-      this.componentPagination.totalItems = null
-
-      this.syndicationItems = this.videoCommentService.getVideoCommentsFeeds(this.video.uuid)
-      this.loadMoreThreads()
-    }
-  }
-
-  private processHighlightedThread (highlightedThreadId: number) {
-    this.highlightedThread = this.comments.find(c => c.id === highlightedThreadId)
-
-    const highlightThread = true
-    this.viewReplies(highlightedThreadId, highlightThread)
-  }
-}
diff --git a/client/src/app/videos/+video-watch/modal/video-share.component.html b/client/src/app/videos/+video-watch/modal/video-share.component.html
deleted file mode 100644
index 5e6a2d518..000000000
--- a/client/src/app/videos/+video-watch/modal/video-share.component.html
+++ /dev/null
@@ -1,187 +0,0 @@
-<ng-template #modal let-hide="close">
-  <div class="modal-header">
-    <h4 i18n class="modal-title">Share</h4>
-    <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
-  </div>
-
-
-  <div class="modal-body">
-    <div class="playlist" *ngIf="hasPlaylist()">
-      <div class="title-page title-page-single" i18n>Share the playlist</div>
-
-      <my-input-readonly-copy [value]="getPlaylistUrl()"></my-input-readonly-copy>
-
-      <div class="filters">
-
-        <div class="form-group">
-          <my-peertube-checkbox
-            inputName="includeVideoInPlaylist" [(ngModel)]="includeVideoInPlaylist"
-            i18n-labelText labelText="Share the playlist at this video position"
-          ></my-peertube-checkbox>
-        </div>
-
-      </div>
-    </div>
-
-
-    <div class="video">
-      <div class="title-page title-page-single" *ngIf="hasPlaylist()" i18n>Share the video</div>
-
-      <div ngbNav #nav="ngbNav" class="nav-tabs" [(activeId)]="activeId">
-
-        <ng-container ngbNavItem="url">
-          <a ngbNavLink i18n>URL</a>
-
-          <ng-template ngbNavContent>
-            <div class="nav-content">
-              <my-input-readonly-copy [value]="getVideoUrl()"></my-input-readonly-copy>
-            </div>
-          </ng-template>
-        </ng-container>
-
-        <ng-container ngbNavItem="qrcode">
-          <a ngbNavLink i18n>QR-Code</a>
-
-          <ng-template ngbNavContent>
-            <div class="nav-content">
-              <qrcode [qrdata]="getVideoUrl()" [size]="256" level="Q"></qrcode>
-            </div>
-          </ng-template>
-        </ng-container>
-
-        <ng-container ngbNavItem="embed">
-          <a ngbNavLink i18n>Embed</a>
-
-          <ng-template ngbNavContent>
-            <div class="nav-content">
-              <my-input-readonly-copy [value]="getVideoIframeCode()"></my-input-readonly-copy>
-
-              <div i18n *ngIf="notSecure()" class="alert alert-warning">
-                The url is not secured (no HTTPS), so the embed video won't work on HTTPS websites (web browsers block non secured HTTP requests on HTTPS websites).
-              </div>
-            </div>
-          </ng-template>
-        </ng-container>
-
-      </div>
-
-      <div [ngbNavOutlet]="nav"></div>
-
-      <div class="filters">
-        <div>
-          <div class="form-group start-at">
-            <my-peertube-checkbox
-              inputName="startAt" [(ngModel)]="customizations.startAtCheckbox"
-              i18n-labelText labelText="Start at"
-            ></my-peertube-checkbox>
-
-            <my-timestamp-input
-              [timestamp]="customizations.startAt"
-              [maxTimestamp]="video.duration"
-              [disabled]="!customizations.startAtCheckbox"
-              [(ngModel)]="customizations.startAt"
-            >
-            </my-timestamp-input>
-          </div>
-
-          <div *ngIf="videoCaptions.length !== 0" class="form-group video-caption-block">
-            <my-peertube-checkbox
-              inputName="subtitleCheckbox" [(ngModel)]="customizations.subtitleCheckbox"
-              i18n-labelText labelText="Auto select subtitle"
-            ></my-peertube-checkbox>
-
-            <div class="peertube-select-container" [ngClass]="{ disabled: !customizations.subtitleCheckbox }">
-              <select [(ngModel)]="customizations.subtitle" [disabled]="!customizations.subtitleCheckbox">
-                <option *ngFor="let caption of videoCaptions" [value]="caption.language.id">{{ caption.language.label }}</option>
-              </select>
-            </div>
-          </div>
-        </div>
-
-        <div class="advanced-filters collapse-transition" [ngbCollapse]="isAdvancedCustomizationCollapsed">
-          <div>
-            <div class="form-group stop-at">
-              <my-peertube-checkbox
-                inputName="stopAt" [(ngModel)]="customizations.stopAtCheckbox"
-                i18n-labelText labelText="Stop at"
-              ></my-peertube-checkbox>
-
-              <my-timestamp-input
-                [timestamp]="customizations.stopAt"
-                [maxTimestamp]="video.duration"
-                [disabled]="!customizations.stopAtCheckbox"
-                [(ngModel)]="customizations.stopAt"
-              >
-              </my-timestamp-input>
-            </div>
-
-            <div class="form-group">
-              <my-peertube-checkbox
-                inputName="autoplay" [(ngModel)]="customizations.autoplay"
-                i18n-labelText labelText="Autoplay"
-              ></my-peertube-checkbox>
-            </div>
-
-            <div class="form-group">
-              <my-peertube-checkbox
-                inputName="muted" [(ngModel)]="customizations.muted"
-                i18n-labelText labelText="Muted"
-              ></my-peertube-checkbox>
-            </div>
-
-            <div class="form-group">
-              <my-peertube-checkbox
-                inputName="loop" [(ngModel)]="customizations.loop"
-                i18n-labelText labelText="Loop"
-              ></my-peertube-checkbox>
-            </div>
-          </div>
-
-          <ng-container *ngIf="isInEmbedTab()">
-            <div class="form-group">
-              <my-peertube-checkbox
-                inputName="title" [(ngModel)]="customizations.title"
-                i18n-labelText labelText="Display video title"
-              ></my-peertube-checkbox>
-            </div>
-
-            <div class="form-group">
-              <my-peertube-checkbox
-                inputName="warningTitle" [(ngModel)]="customizations.warningTitle"
-                i18n-labelText labelText="Display privacy warning"
-              ></my-peertube-checkbox>
-            </div>
-
-            <div class="form-group">
-              <my-peertube-checkbox
-                inputName="controls" [(ngModel)]="customizations.controls"
-                i18n-labelText labelText="Display player controls"
-              ></my-peertube-checkbox>
-            </div>
-          </ng-container>
-        </div>
-
-        <div (click)="isAdvancedCustomizationCollapsed = !isAdvancedCustomizationCollapsed" role="button" class="advanced-filters-button"
-             [attr.aria-expanded]="!isAdvancedCustomizationCollapsed" aria-controls="collapseBasic">
-
-          <ng-container *ngIf="isAdvancedCustomizationCollapsed">
-            <span class="glyphicon glyphicon-menu-down"></span>
-
-            <ng-container i18n>
-              More customization
-            </ng-container>
-          </ng-container>
-
-          <ng-container *ngIf="!isAdvancedCustomizationCollapsed">
-            <span class="glyphicon glyphicon-menu-up"></span>
-
-            <ng-container i18n>
-              Less customization
-            </ng-container>
-          </ng-container>
-        </div>
-      </div>
-    </div>
-  </div>
-
-</ng-template>
diff --git a/client/src/app/videos/+video-watch/modal/video-share.component.scss b/client/src/app/videos/+video-watch/modal/video-share.component.scss
deleted file mode 100644
index 091d4dc3b..000000000
--- a/client/src/app/videos/+video-watch/modal/video-share.component.scss
+++ /dev/null
@@ -1,79 +0,0 @@
-@import '_mixins';
-@import '_variables';
-
-my-input-readonly-copy {
-  width: 100%;
-}
-
-.title-page.title-page-single {
-  margin-top: 0;
-}
-
-.playlist {
-  margin-bottom: 50px;
-}
-
-.peertube-select-container {
-  @include peertube-select-container(200px);
-}
-
-.qr-code-group {
-  text-align: center;
-}
-
-.nav-content {
-  margin-top: 30px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-}
-
-.alert {
-  margin-top: 20px;
-}
-
-.filters {
-  margin-top: 30px;
-
-  .advanced-filters-button {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin-top: 20px;
-    font-size: 16px;
-    font-weight: $font-semibold;
-    cursor: pointer;
-
-    .glyphicon {
-      margin-right: 5px;
-    }
-  }
-
-  .form-group {
-    margin-bottom: 0;
-    height: 34px;
-    display: flex;
-    align-items: center;
-  }
-
-  .video-caption-block {
-    display: flex;
-    align-items: center;
-
-    .peertube-select-container {
-      margin-left: 10px;
-    }
-  }
-
-  .start-at,
-  .stop-at {
-    width: 300px;
-    display: flex;
-    align-items: center;
-
-    my-timestamp-input {
-      margin-left: 10px;
-    }
-  }
-}
diff --git a/client/src/app/videos/+video-watch/modal/video-share.component.ts b/client/src/app/videos/+video-watch/modal/video-share.component.ts
deleted file mode 100644
index b42b775c1..000000000
--- a/client/src/app/videos/+video-watch/modal/video-share.component.ts
+++ /dev/null
@@ -1,126 +0,0 @@
-import { Component, ElementRef, Input, ViewChild } from '@angular/core'
-import { buildVideoEmbed, buildVideoLink } from '../../../../assets/player/utils'
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { VideoCaption } from '@shared/models'
-import { VideoDetails } from '@app/shared/shared-main'
-import { VideoPlaylist } from '@app/shared/shared-video-playlist'
-
-type Customizations = {
-  startAtCheckbox: boolean
-  startAt: number
-
-  stopAtCheckbox: boolean
-  stopAt: number
-
-  subtitleCheckbox: boolean
-  subtitle: string
-
-  loop: boolean
-  autoplay: boolean
-  muted: boolean
-  title: boolean
-  warningTitle: boolean
-  controls: boolean
-}
-
-@Component({
-  selector: 'my-video-share',
-  templateUrl: './video-share.component.html',
-  styleUrls: [ './video-share.component.scss' ]
-})
-export class VideoShareComponent {
-  @ViewChild('modal', { static: true }) modal: ElementRef
-
-  @Input() video: VideoDetails = null
-  @Input() videoCaptions: VideoCaption[] = []
-  @Input() playlist: VideoPlaylist = null
-
-  activeId: 'url' | 'qrcode' | 'embed' = 'url'
-  customizations: Customizations
-  isAdvancedCustomizationCollapsed = true
-  includeVideoInPlaylist = false
-
-  constructor (private modalService: NgbModal) { }
-
-  show (currentVideoTimestamp?: number) {
-    let subtitle: string
-    if (this.videoCaptions.length !== 0) {
-      subtitle = this.videoCaptions[0].language.id
-    }
-
-    this.customizations = {
-      startAtCheckbox: false,
-      startAt: currentVideoTimestamp ? Math.floor(currentVideoTimestamp) : 0,
-
-      stopAtCheckbox: false,
-      stopAt: this.video.duration,
-
-      subtitleCheckbox: false,
-      subtitle,
-
-      loop: false,
-      autoplay: false,
-      muted: false,
-
-      // Embed options
-      title: true,
-      warningTitle: true,
-      controls: true
-    }
-
-    this.modalService.open(this.modal, { centered: true })
-  }
-
-  getVideoIframeCode () {
-    const options = this.getOptions(this.video.embedUrl)
-
-    const embedUrl = buildVideoLink(options)
-    return buildVideoEmbed(embedUrl)
-  }
-
-  getVideoUrl () {
-    const baseUrl = window.location.origin + '/videos/watch/' + this.video.uuid
-    const options = this.getOptions(baseUrl)
-
-    return buildVideoLink(options)
-  }
-
-  getPlaylistUrl () {
-    const base = window.location.origin + '/videos/watch/playlist/' + this.playlist.uuid
-
-    if (!this.includeVideoInPlaylist) return base
-
-    return base + '?videoId=' + this.video.uuid
-  }
-
-  notSecure () {
-    return window.location.protocol === 'http:'
-  }
-
-  isInEmbedTab () {
-    return this.activeId === 'embed'
-  }
-
-  hasPlaylist () {
-    return !!this.playlist
-  }
-
-  private getOptions (baseUrl?: string) {
-    return {
-      baseUrl,
-
-      startTime: this.customizations.startAtCheckbox ? this.customizations.startAt : undefined,
-      stopTime: this.customizations.stopAtCheckbox ? this.customizations.stopAt : undefined,
-
-      subtitle: this.customizations.subtitleCheckbox ? this.customizations.subtitle : undefined,
-
-      loop: this.customizations.loop,
-      autoplay: this.customizations.autoplay,
-      muted: this.customizations.muted,
-
-      title: this.customizations.title,
-      warningTitle: this.customizations.warningTitle,
-      controls: this.customizations.controls
-    }
-  }
-}
diff --git a/client/src/app/videos/+video-watch/modal/video-support.component.html b/client/src/app/videos/+video-watch/modal/video-support.component.html
deleted file mode 100644
index 935656d23..000000000
--- a/client/src/app/videos/+video-watch/modal/video-support.component.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<ng-template #modal let-hide="close">
-  <div class="modal-header">
-    <h4 i18n class="modal-title">Support {{ video.account.displayName }}</h4>
-    <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
-  </div>
-
-  <div class="modal-body" [innerHTML]="videoHTMLSupport"></div>
-
-  <div class="modal-footer inputs">
-    <input
-      type="button" role="button" i18n-value value="Maybe later" class="action-button action-button-cancel"
-      (click)="hide()" (key.enter)="hide()"
-    >
-  </div>
-</ng-template>
diff --git a/client/src/app/videos/+video-watch/modal/video-support.component.scss b/client/src/app/videos/+video-watch/modal/video-support.component.scss
deleted file mode 100644
index 184e09027..000000000
--- a/client/src/app/videos/+video-watch/modal/video-support.component.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.action-button-cancel {
-  margin-right: 0 !important;
-}
diff --git a/client/src/app/videos/+video-watch/modal/video-support.component.ts b/client/src/app/videos/+video-watch/modal/video-support.component.ts
deleted file mode 100644
index 48d5f2948..000000000
--- a/client/src/app/videos/+video-watch/modal/video-support.component.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { Component, Input, ViewChild } from '@angular/core'
-import { MarkdownService } from '@app/core'
-import { VideoDetails } from '@app/shared/shared-main'
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
-
-@Component({
-  selector: 'my-video-support',
-  templateUrl: './video-support.component.html',
-  styleUrls: [ './video-support.component.scss' ]
-})
-export class VideoSupportComponent {
-  @Input() video: VideoDetails = null
-
-  @ViewChild('modal', { static: true }) modal: NgbModal
-
-  videoHTMLSupport = ''
-
-  constructor (
-    private markdownService: MarkdownService,
-    private modalService: NgbModal
-  ) { }
-
-  show () {
-    this.modalService.open(this.modal, { centered: true })
-
-    this.markdownService.enhancedMarkdownToHTML(this.video.support)
-      .then(r => this.videoHTMLSupport = r)
-  }
-}
diff --git a/client/src/app/videos/+video-watch/timestamp-route-transformer.directive.ts b/client/src/app/videos/+video-watch/timestamp-route-transformer.directive.ts
deleted file mode 100644
index 45e023695..000000000
--- a/client/src/app/videos/+video-watch/timestamp-route-transformer.directive.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import { Directive, EventEmitter, HostListener, Output } from '@angular/core'
-
-@Directive({
-  selector: '[timestampRouteTransformer]'
-})
-export class TimestampRouteTransformerDirective {
-  @Output() timestampClicked = new EventEmitter<number>()
-
-  @HostListener('click', ['$event'])
-  public onClick ($event: Event) {
-    const target = $event.target as HTMLLinkElement
-
-    if (target.hasAttribute('href') !== true) return
-
-    const ngxLink = document.createElement('a')
-    ngxLink.href = target.getAttribute('href')
-
-    // we only care about reflective links
-    if (ngxLink.host !== window.location.host) return
-
-    const ngxLinkParams = new URLSearchParams(ngxLink.search)
-    if (ngxLinkParams.has('start') !== true) return
-
-    const separators = ['h', 'm', 's']
-    const start = ngxLinkParams
-      .get('start')
-      .match(new RegExp('(\\d{1,9}[' + separators.join('') + '])','g')) // match digits before any given separator
-      .map(t => {
-        if (t.includes('h')) return parseInt(t, 10) * 3600
-        if (t.includes('m')) return parseInt(t, 10) * 60
-        return parseInt(t, 10)
-      })
-      .reduce((acc, t) => acc + t)
-
-    this.timestampClicked.emit(start)
-
-    $event.preventDefault()
-  }
-}
diff --git a/client/src/app/videos/+video-watch/video-duration-formatter.pipe.ts b/client/src/app/videos/+video-watch/video-duration-formatter.pipe.ts
deleted file mode 100644
index 4b6767415..000000000
--- a/client/src/app/videos/+video-watch/video-duration-formatter.pipe.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { Pipe, PipeTransform } from '@angular/core'
-import { I18n } from '@ngx-translate/i18n-polyfill'
-
-@Pipe({
-  name: 'myVideoDurationFormatter'
-})
-export class VideoDurationPipe implements PipeTransform {
-
-  constructor (private i18n: I18n) {
-
-  }
-
-  transform (value: number): string {
-    const hours = Math.floor(value / 3600)
-    const minutes = Math.floor((value % 3600) / 60)
-    const seconds = value % 60
-
-    if (hours > 0) {
-      return this.i18n('{{hours}} h {{minutes}} min {{seconds}} sec', { hours, minutes, seconds })
-    }
-
-    if (minutes > 0) {
-      return this.i18n('{{minutes}} min {{seconds}} sec', { minutes, seconds })
-    }
-
-    return this.i18n('{{seconds}} sec', { seconds })
-  }
-}
diff --git a/client/src/app/videos/+video-watch/video-watch-playlist.component.html b/client/src/app/videos/+video-watch/video-watch-playlist.component.html
deleted file mode 100644
index 246ef83cf..000000000
--- a/client/src/app/videos/+video-watch/video-watch-playlist.component.html
+++ /dev/null
@@ -1,46 +0,0 @@
-<div *ngIf="playlist && video" class="playlist" myInfiniteScroller [autoInit]="true" [onItself]="true" (nearOfBottom)="onPlaylistVideosNearOfBottom()">
-  <div class="playlist-info">
-    <div class="playlist-display-name">
-      {{ playlist.displayName }}
-
-      <span *ngIf="isUnlistedPlaylist()" class="badge badge-warning" i18n>Unlisted</span>
-      <span *ngIf="isPrivatePlaylist()" class="badge badge-danger" i18n>Private</span>
-      <span *ngIf="isPublicPlaylist()" class="badge badge-info" i18n>Public</span>
-    </div>
-
-    <div class="playlist-by-index">
-      <div class="playlist-by">{{ playlist.ownerBy }}</div>
-      <div class="playlist-index">
-        <span>{{ currentPlaylistPosition }}</span><span>{{ playlistPagination.totalItems }}</span>
-      </div>
-    </div>
-
-    <div class="playlist-controls">
-      <my-global-icon
-        iconName="videos"
-        [class.active]="autoPlayNextVideoPlaylist"
-        (click)="switchAutoPlayNextVideoPlaylist()"
-        [ngbTooltip]="autoPlayNextVideoPlaylistSwitchText"
-        placement="bottom auto"
-        container="body"
-      ></my-global-icon>
-
-      <my-global-icon
-        iconName="repeat"
-        [class.active]="loopPlaylist"
-        (click)="switchLoopPlaylist()"
-        [ngbTooltip]="loopPlaylistSwitchText"
-        placement="bottom auto"
-        container="body"
-      ></my-global-icon>
-    </div>
-  </div>
-
-  <div *ngFor="let playlistElement of playlistElements">
-    <my-video-playlist-element-miniature
-      [playlistElement]="playlistElement" [playlist]="playlist" [owned]="isPlaylistOwned()" (elementRemoved)="onElementRemoved($event)"
-      [playing]="currentPlaylistPosition === playlistElement.position" [accountLink]="false" [position]="playlistElement.position"
-      [touchScreenEditButton]="true"
-    ></my-video-playlist-element-miniature>
-  </div>
-</div>
diff --git a/client/src/app/videos/+video-watch/video-watch-playlist.component.scss b/client/src/app/videos/+video-watch/video-watch-playlist.component.scss
deleted file mode 100644
index 0b0a2a899..000000000
--- a/client/src/app/videos/+video-watch/video-watch-playlist.component.scss
+++ /dev/null
@@ -1,83 +0,0 @@
-@import '_variables';
-@import '_mixins';
-@import '_bootstrap-variables';
-@import '_miniature';
-
-.playlist {
-  min-width: 200px;
-  max-width: 470px;
-  height: 66vh;
-  background-color: pvar(--mainBackgroundColor);
-  overflow-y: auto;
-  border-bottom: 1px solid $separator-border-color;
-
-  .playlist-info {
-    padding: 5px 30px;
-    background-color: #e4e4e4;
-
-    .playlist-display-name {
-      font-size: 18px;
-      font-weight: $font-semibold;
-      margin-bottom: 5px;
-    }
-
-    .playlist-by-index {
-      color: pvar(--greyForegroundColor);
-      display: flex;
-
-      .playlist-by {
-        margin-right: 5px;
-      }
-
-      .playlist-index span:first-child::after {
-        content: '/';
-        margin: 0 3px;
-      }
-    }
-
-    .playlist-controls {
-      display: flex;
-      margin: 10px 0;
-
-      my-global-icon:not(:last-child) {
-        margin-right: .5rem;
-      }
-
-      my-global-icon {
-        &:not(.active) {
-          opacity: .5
-        }
-
-        ::ng-deep {
-          cursor: pointer;
-        }
-      }
-    }
-  }
-
-  my-video-playlist-element-miniature {
-    ::ng-deep {
-      .video {
-        .position {
-          margin-right: 0;
-        }
-
-        .video-info {
-          .video-info-name {
-            font-size: 15px;
-          }
-        }
-      }
-
-      my-video-thumbnail {
-        @include thumbnail-size-component(90px, 50px);
-      }
-
-      .fake-thumbnail {
-        width: 90px;
-        height: 50px;
-      }
-    }
-  }
-}
-
diff --git a/client/src/app/videos/+video-watch/video-watch-playlist.component.ts b/client/src/app/videos/+video-watch/video-watch-playlist.component.ts
deleted file mode 100644
index 2c21be643..000000000
--- a/client/src/app/videos/+video-watch/video-watch-playlist.component.ts
+++ /dev/null
@@ -1,201 +0,0 @@
-import { Component, Input } from '@angular/core'
-import { Router } from '@angular/router'
-import { AuthService, ComponentPagination, LocalStorageService, Notifier, SessionStorageService, UserService } from '@app/core'
-import { peertubeLocalStorage, peertubeSessionStorage } from '@app/helpers/peertube-web-storage'
-import { VideoPlaylist, VideoPlaylistElement, VideoPlaylistService } from '@app/shared/shared-video-playlist'
-import { I18n } from '@ngx-translate/i18n-polyfill'
-import { VideoDetails, VideoPlaylistPrivacy } from '@shared/models'
-
-@Component({
-  selector: 'my-video-watch-playlist',
-  templateUrl: './video-watch-playlist.component.html',
-  styleUrls: [ './video-watch-playlist.component.scss' ]
-})
-export class VideoWatchPlaylistComponent {
-  static LOCAL_STORAGE_AUTO_PLAY_NEXT_VIDEO_PLAYLIST = 'auto_play_video_playlist'
-  static SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO_PLAYLIST = 'loop_playlist'
-
-  @Input() video: VideoDetails
-  @Input() playlist: VideoPlaylist
-
-  playlistElements: VideoPlaylistElement[] = []
-  playlistPagination: ComponentPagination = {
-    currentPage: 1,
-    itemsPerPage: 30,
-    totalItems: null
-  }
-
-  autoPlayNextVideoPlaylist: boolean
-  autoPlayNextVideoPlaylistSwitchText = ''
-  loopPlaylist: boolean
-  loopPlaylistSwitchText = ''
-  noPlaylistVideos = false
-  currentPlaylistPosition = 1
-
-  constructor (
-    private userService: UserService,
-    private auth: AuthService,
-    private notifier: Notifier,
-    private i18n: I18n,
-    private videoPlaylist: VideoPlaylistService,
-    private localStorageService: LocalStorageService,
-    private sessionStorageService: SessionStorageService,
-    private router: Router
-  ) {
-    // defaults to true
-    this.autoPlayNextVideoPlaylist = this.auth.isLoggedIn()
-      ? this.auth.getUser().autoPlayNextVideoPlaylist
-      : this.localStorageService.getItem(VideoWatchPlaylistComponent.LOCAL_STORAGE_AUTO_PLAY_NEXT_VIDEO_PLAYLIST) !== 'false'
-    this.setAutoPlayNextVideoPlaylistSwitchText()
-
-    // defaults to false
-    this.loopPlaylist = this.sessionStorageService.getItem(VideoWatchPlaylistComponent.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO_PLAYLIST) === 'true'
-    this.setLoopPlaylistSwitchText()
-  }
-
-  onPlaylistVideosNearOfBottom () {
-    // Last page
-    if (this.playlistPagination.totalItems <= (this.playlistPagination.currentPage * this.playlistPagination.itemsPerPage)) return
-
-    this.playlistPagination.currentPage += 1
-    this.loadPlaylistElements(this.playlist,false)
-  }
-
-  onElementRemoved (playlistElement: VideoPlaylistElement) {
-    this.playlistElements = this.playlistElements.filter(e => e.id !== playlistElement.id)
-
-    this.playlistPagination.totalItems--
-  }
-
-  isPlaylistOwned () {
-    return this.playlist.isLocal === true &&
-      this.auth.isLoggedIn() &&
-      this.playlist.ownerAccount.name === this.auth.getUser().username
-  }
-
-  isUnlistedPlaylist () {
-    return this.playlist.privacy.id === VideoPlaylistPrivacy.UNLISTED
-  }
-
-  isPrivatePlaylist () {
-    return this.playlist.privacy.id === VideoPlaylistPrivacy.PRIVATE
-  }
-
-  isPublicPlaylist () {
-    return this.playlist.privacy.id === VideoPlaylistPrivacy.PUBLIC
-  }
-
-  loadPlaylistElements (playlist: VideoPlaylist, redirectToFirst = false) {
-    this.videoPlaylist.getPlaylistVideos(playlist.uuid, this.playlistPagination)
-        .subscribe(({ total, data }) => {
-          this.playlistElements = this.playlistElements.concat(data)
-          this.playlistPagination.totalItems = total
-
-          const firstAvailableVideos = this.playlistElements.find(e => !!e.video)
-          if (!firstAvailableVideos) {
-            this.noPlaylistVideos = true
-            return
-          }
-
-          this.updatePlaylistIndex(this.video)
-
-          if (redirectToFirst) {
-            const extras = {
-              queryParams: {
-                start: firstAvailableVideos.startTimestamp,
-                stop: firstAvailableVideos.stopTimestamp,
-                videoId: firstAvailableVideos.video.uuid
-              },
-              replaceUrl: true
-            }
-            this.router.navigate([], extras)
-          }
-        })
-  }
-
-  updatePlaylistIndex (video: VideoDetails) {
-    if (this.playlistElements.length === 0 || !video) return
-
-    for (const playlistElement of this.playlistElements) {
-      if (playlistElement.video && playlistElement.video.id === video.id) {
-        this.currentPlaylistPosition = playlistElement.position
-        return
-      }
-    }
-
-    // Load more videos to find our video
-    this.onPlaylistVideosNearOfBottom()
-  }
-
-  findNextPlaylistVideo (position = this.currentPlaylistPosition): VideoPlaylistElement {
-    if (this.currentPlaylistPosition >= this.playlistPagination.totalItems) {
-      // we have reached the end of the playlist: either loop or stop
-      if (this.loopPlaylist) {
-        this.currentPlaylistPosition = position = 0
-      } else {
-        return
-      }
-    }
-
-    const next = this.playlistElements.find(e => e.position === position)
-
-    if (!next || !next.video) {
-      return this.findNextPlaylistVideo(position + 1)
-    }
-
-    return next
-  }
-
-  navigateToNextPlaylistVideo () {
-    const next = this.findNextPlaylistVideo(this.currentPlaylistPosition + 1)
-    if (!next) return
-    const start = next.startTimestamp
-    const stop = next.stopTimestamp
-    this.router.navigate([],{ queryParams: { videoId: next.video.uuid, start, stop } })
-  }
-
-  switchAutoPlayNextVideoPlaylist () {
-    this.autoPlayNextVideoPlaylist = !this.autoPlayNextVideoPlaylist
-    this.setAutoPlayNextVideoPlaylistSwitchText()
-
-    peertubeLocalStorage.setItem(
-      VideoWatchPlaylistComponent.LOCAL_STORAGE_AUTO_PLAY_NEXT_VIDEO_PLAYLIST,
-      this.autoPlayNextVideoPlaylist.toString()
-    )
-
-    if (this.auth.isLoggedIn()) {
-      const details = {
-        autoPlayNextVideoPlaylist: this.autoPlayNextVideoPlaylist
-      }
-
-      this.userService.updateMyProfile(details).subscribe(
-        () => {
-          this.auth.refreshUserInformation()
-        },
-        err => this.notifier.error(err.message)
-      )
-    }
-  }
-
-  switchLoopPlaylist () {
-    this.loopPlaylist = !this.loopPlaylist
-    this.setLoopPlaylistSwitchText()
-
-    peertubeSessionStorage.setItem(
-      VideoWatchPlaylistComponent.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO_PLAYLIST,
-      this.loopPlaylist.toString()
-    )
-  }
-
-  private setAutoPlayNextVideoPlaylistSwitchText () {
-    this.autoPlayNextVideoPlaylistSwitchText = this.autoPlayNextVideoPlaylist
-      ? this.i18n('Stop autoplaying next video')
-      : this.i18n('Autoplay next video')
-  }
-
-  private setLoopPlaylistSwitchText () {
-    this.loopPlaylistSwitchText = this.loopPlaylist
-      ? this.i18n('Stop looping playlist videos')
-      : this.i18n('Loop playlist videos')
-  }
-}
diff --git a/client/src/app/videos/+video-watch/video-watch-routing.module.ts b/client/src/app/videos/+video-watch/video-watch-routing.module.ts
deleted file mode 100644
index d8fecb87d..000000000
--- a/client/src/app/videos/+video-watch/video-watch-routing.module.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { NgModule } from '@angular/core'
-import { RouterModule, Routes } from '@angular/router'
-import { MetaGuard } from '@ngx-meta/core'
-import { VideoWatchComponent } from './video-watch.component'
-
-const videoWatchRoutes: Routes = [
-  {
-    path: 'playlist/:playlistId',
-    component: VideoWatchComponent,
-    canActivate: [ MetaGuard ]
-  },
-  {
-    path: ':videoId/comments/:commentId',
-    redirectTo: ':videoId'
-  },
-  {
-    path: ':videoId',
-    component: VideoWatchComponent,
-    canActivate: [ MetaGuard ]
-  }
-]
-
-@NgModule({
-  imports: [ RouterModule.forChild(videoWatchRoutes) ],
-  exports: [ RouterModule ]
-})
-export class VideoWatchRoutingModule {}
diff --git a/client/src/app/videos/+video-watch/video-watch.component.html b/client/src/app/videos/+video-watch/video-watch.component.html
deleted file mode 100644
index 0447268f0..000000000
--- a/client/src/app/videos/+video-watch/video-watch.component.html
+++ /dev/null
@@ -1,277 +0,0 @@
-<div class="root" [ngClass]="{ 'theater-enabled': theaterEnabled }">
-  <!-- We need the video container for videojs so we just hide it -->
-  <div id="video-wrapper">
-    <div *ngIf="remoteServerDown" class="remote-server-down">
-      Sorry, but this video is not available because the remote instance is not responding.
-      <br />
-      Please try again later.
-    </div>
-
-    <div id="videojs-wrapper"></div>
-
-    <my-video-watch-playlist
-      #videoWatchPlaylist
-      [video]="video" [playlist]="playlist" class="playlist"
-    ></my-video-watch-playlist>
-  </div>
-
-  <div class="row">
-    <div i18n class="col-md-12 alert alert-warning" *ngIf="isVideoToImport()">
-      The video is being imported, it will be available when the import is finished.
-    </div>
-
-    <div i18n class="col-md-12 alert alert-warning" *ngIf="isVideoToTranscode()">
-      The video is being transcoded, it may not work properly.
-    </div>
-
-    <div i18n class="col-md-12 alert alert-info" *ngIf="hasVideoScheduledPublication()">
-      This video will be published on {{ video.scheduledUpdate.updateAt | date: 'full' }}.
-    </div>
-
-    <div class="col-md-12 alert alert-danger" *ngIf="video?.blacklisted">
-      <div class="blocked-label" i18n>This video is blocked.</div>
-      {{ video.blockedReason }}
-    </div>
-  </div>
-
-  <!-- Video information -->
-  <div *ngIf="video" class="margin-content video-bottom">
-    <div class="video-info">
-      <div class="video-info-first-row">
-        <div>
-          <div class="d-block d-md-none"> <!-- only shown on medium devices, has its counterpart for larger viewports below -->
-            <h1 class="video-info-name">{{ video.name }}</h1>
-
-            <div i18n class="video-info-date-views">
-              Published <my-date-toggle [date]="video.publishedAt"></my-date-toggle> <span class="views"> • {{ video.views | myNumberFormatter }} views</span>
-            </div>
-          </div>
-
-          <div class="d-flex justify-content-between flex-direction-column">
-            <div class="d-none d-md-block">
-              <h1 class="video-info-name">{{ video.name }}</h1>
-            </div>
-
-            <div class="video-info-first-row-bottom">
-              <div i18n class="d-none d-md-block video-info-date-views">
-                Published <my-date-toggle [date]="video.publishedAt"></my-date-toggle> <span class="views"> • {{ video.views | myNumberFormatter }} views</span>
-              </div>
-
-              <div class="video-actions-rates">
-                <div class="video-actions fullWidth justify-content-end">
-                  <button
-                    [ngbPopover]="getRatePopoverText()" [ngClass]="{ 'activated': userRating === 'like' }" (click)="setLike()" (keyup.enter)="setLike()"
-                    class="action-button action-button-like" [attr.aria-pressed]="userRating === 'like'" [attr.aria-label]="tooltipLike"
-                    [ngbTooltip]="tooltipLike"
-                    placement="bottom auto"
-                  >
-                    <my-global-icon iconName="like"></my-global-icon>
-                    <span *ngIf="video.likes" class="count">{{ video.likes }}</span>
-                </button>
-
-                  <button
-                    [ngbPopover]="getRatePopoverText()" [ngClass]="{ 'activated': userRating === 'dislike' }" (click)="setDislike()" (keyup.enter)="setDislike()"
-                    class="action-button action-button-dislike" [attr.aria-pressed]="userRating === 'dislike'" [attr.aria-label]="tooltipDislike"
-                    [ngbTooltip]="tooltipDislike"
-                    placement="bottom auto"
-                  >
-                    <my-global-icon iconName="dislike"></my-global-icon>
-                    <span *ngIf="video.dislikes" class="count">{{ video.dislikes }}</span>
-                  </button>
-
-                  <button *ngIf="video.support" (click)="showSupportModal()" (keyup.enter)="showSupportModal()" class="action-button action-button-support" [attr.aria-label]="tooltipSupport"
-                    [ngbTooltip]="tooltipSupport"
-                    placement="bottom auto"
-                  >
-                    <my-global-icon iconName="support" aria-hidden="true"></my-global-icon>
-                    <span class="icon-text" i18n>SUPPORT</span>
-                  </button>
-
-                  <button (click)="showShareModal()" (keyup.enter)="showShareModal()" class="action-button">
-                    <my-global-icon iconName="share" aria-hidden="true"></my-global-icon>
-                    <span class="icon-text" i18n>SHARE</span>
-                  </button>
-
-                  <div
-                    class="action-dropdown" ngbDropdown placement="top" role="button" autoClose="outside"
-                     *ngIf="isUserLoggedIn()" (openChange)="addContent.openChange($event)"
-                     [ngbTooltip]="tooltipSaveToPlaylist"
-                     placement="bottom auto"
-                  >
-                    <button class="action-button action-button-save" ngbDropdownToggle>
-                      <my-global-icon iconName="playlist-add" aria-hidden="true"></my-global-icon>
-                      <span class="icon-text" i18n>SAVE</span>
-                    </button>
-
-                    <div ngbDropdownMenu>
-                      <my-video-add-to-playlist #addContent [video]="video"></my-video-add-to-playlist>
-                    </div>
-                  </div>
-
-                  <my-video-actions-dropdown
-                    placement="bottom auto" buttonDirection="horizontal" [buttonStyled]="true" [video]="video" [videoCaptions]="videoCaptions"
-                    (videoRemoved)="onVideoRemoved()" (modalOpened)="onModalOpened()"
-                  ></my-video-actions-dropdown>
-                </div>
-
-                <div class="video-info-likes-dislikes-bar-outer-container">
-                  <div
-                    class="video-info-likes-dislikes-bar-inner-container"
-                    *ngIf="video.likes !== 0 || video.dislikes !== 0"
-                    [ngbTooltip]="likesBarTooltipText"
-                    placement="bottom"
-                  >
-                    <div
-                      class="video-info-likes-dislikes-bar"
-                    >
-                      <div class="likes-bar" [ngClass]="{ 'liked': userRating !== 'none' }" [ngStyle]="{ 'width.%': video.likesPercent }"></div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              <div
-                class="video-info-likes-dislikes-bar"
-                *ngIf="video.likes !== 0 || video.dislikes !== 0"
-                [ngbTooltip]="likesBarTooltipText"
-                placement="bottom"
-              >
-                <div class="likes-bar" [ngStyle]="{ 'width.%': video.likesPercent }"></div>
-              </div>
-            </div>
-          </div>
-
-
-          <div class="pt-3 border-top video-info-channel d-flex">
-            <div class="video-info-channel-left d-flex">
-              <avatar-channel [video]="video"></avatar-channel>
-
-              <div class="video-info-channel-left-links ml-1">
-                <a [routerLink]="[ '/video-channels', video.byVideoChannel ]" i18n-title title="Channel page">
-                  {{ video.channel.displayName }}
-                </a>
-                <a [routerLink]="[ '/accounts', video.byAccount ]" i18n-title title="Account page">
-                  <span i18n>By {{ video.byAccount }}</span>
-                </a>
-              </div>
-            </div>
-
-            <my-subscribe-button #subscribeButton [videoChannels]="[video.channel]" size="small"></my-subscribe-button>
-          </div>
-        </div>
-
-      </div>
-
-      <div class="video-info-description">
-        <div
-          class="video-info-description-html"
-          [innerHTML]="videoHTMLDescription"
-          (timestampClicked)="handleTimestampClicked($event)"
-          timestampRouteTransformer
-        ></div>
-
-        <div class="video-info-description-more" *ngIf="completeDescriptionShown === false && video.description?.length >= 250" (click)="showMoreDescription()">
-          <ng-container i18n>Show more</ng-container>
-          <span *ngIf="descriptionLoading === false" class="glyphicon glyphicon-menu-down"></span>
-          <my-small-loader class="description-loading" [loading]="descriptionLoading"></my-small-loader>
-        </div>
-
-        <div *ngIf="completeDescriptionShown === true" (click)="showLessDescription()" class="video-info-description-more">
-          <ng-container i18n>Show less</ng-container>
-          <span *ngIf="descriptionLoading === false" class="glyphicon glyphicon-menu-up"></span>
-        </div>
-      </div>
-
-      <div class="video-attributes mb-3">
-        <div class="video-attribute">
-          <span i18n class="video-attribute-label">Privacy</span>
-          <span class="video-attribute-value">{{ video.privacy.label }}</span>
-        </div>
-
-        <div *ngIf="video.isLocal === false" class="video-attribute">
-          <span i18n class="video-attribute-label">Origin instance</span>
-          <a class="video-attribute-value" target="_blank" rel="noopener noreferrer" [href]="video.originInstanceUrl">{{ video.originInstanceHost }}</a>
-        </div>
-
-        <div *ngIf="!!video.originallyPublishedAt" class="video-attribute">
-          <span i18n class="video-attribute-label">Originally published</span>
-          <span class="video-attribute-value">{{ video.originallyPublishedAt | date: 'dd MMMM yyyy' }}</span>
-        </div>
-
-        <div class="video-attribute">
-          <span i18n class="video-attribute-label">Category</span>
-          <span *ngIf="!video.category.id" class="video-attribute-value">{{ video.category.label }}</span>
-          <a
-            *ngIf="video.category.id" class="video-attribute-value"
-            [routerLink]="[ '/search' ]" [queryParams]="{ categoryOneOf: [ video.category.id ] }"
-          >{{ video.category.label }}</a>
-        </div>
-
-        <div class="video-attribute">
-          <span i18n class="video-attribute-label">Licence</span>
-          <span *ngIf="!video.licence.id" class="video-attribute-value">{{ video.licence.label }}</span>
-          <a
-            *ngIf="video.licence.id" class="video-attribute-value"
-            [routerLink]="[ '/search' ]" [queryParams]="{ licenceOneOf: [ video.licence.id ] }"
-          >{{ video.licence.label }}</a>
-        </div>
-
-        <div class="video-attribute">
-          <span i18n class="video-attribute-label">Language</span>
-          <span *ngIf="!video.language.id" class="video-attribute-value">{{ video.language.label }}</span>
-          <a
-            *ngIf="video.language.id" class="video-attribute-value"
-            [routerLink]="[ '/search' ]" [queryParams]="{ languageOneOf: [ video.language.id ] }"
-          >{{ video.language.label }}</a>
-        </div>
-
-        <div class="video-attribute video-attribute-tags">
-          <span i18n class="video-attribute-label">Tags</span>
-          <a
-            *ngFor="let tag of getVideoTags()"
-            class="video-attribute-value" [routerLink]="[ '/search' ]" [queryParams]="{ tagsOneOf: [ tag ] }"
-          >{{ tag }}</a>
-        </div>
-
-        <div class="video-attribute">
-          <span i18n class="video-attribute-label">Duration</span>
-          <span class="video-attribute-value">{{ video.duration | myVideoDurationFormatter }}</span>
-        </div>
-      </div>
-
-      <my-video-comments
-        class="border-top"
-        [video]="video"
-        [user]="user"
-        (timestampClicked)="handleTimestampClicked($event)"
-      ></my-video-comments>
-    </div>
-
-    <my-recommended-videos
-      [inputRecommendation]="{ uuid: video.uuid, tags: video.tags }"
-      [playlist]="playlist"
-      (gotRecommendations)="onRecommendations($event)"
-    ></my-recommended-videos>
-  </div>
-
-  <div class="row privacy-concerns" *ngIf="hasAlreadyAcceptedPrivacyConcern === false">
-    <div class="privacy-concerns-text">
-      <span class="mr-2">
-        <strong i18n>Friendly Reminder: </strong>
-        <ng-container i18n>
-          the sharing system used for this video implies that some technical information about your system (such as a public IP address) can be sent to other peers.
-        </ng-container>
-      </span>
-      <a i18n i18n-title title="Get more information" target="_blank" rel="noopener noreferrer" href="/about/peertube#privacy">More information</a>
-    </div>
-
-    <div i18n class="privacy-concerns-button privacy-concerns-okay" (click)="acceptedPrivacyConcern()">
-      OK
-    </div>
-  </div>
-</div>
-
-<ng-container *ngIf="video !== null">
-  <my-video-support #videoSupportModal [video]="video"></my-video-support>
-  <my-video-share #videoShareModal [video]="video" [videoCaptions]="videoCaptions" [playlist]="playlist"></my-video-share>
-</ng-container>
diff --git a/client/src/app/videos/+video-watch/video-watch.component.scss b/client/src/app/videos/+video-watch/video-watch.component.scss
deleted file mode 100644
index 2e083982e..000000000
--- a/client/src/app/videos/+video-watch/video-watch.component.scss
+++ /dev/null
@@ -1,607 +0,0 @@
-@import '_variables';
-@import '_mixins';
-@import '_bootstrap-variables';
-@import '_miniature';
-
-$player-factor: 1.7; // 16/9
-$video-info-margin-left: 44px;
-
-@function getPlayerHeight($width){
-  @return calc(#{$width} / #{$player-factor})
-}
-
-@function getPlayerWidth($height){
-  @return calc(#{$height} * #{$player-factor})
-}
-
-@mixin playlist-below-player {
-  width: 100% !important;
-  height: auto !important;
-  max-height: 300px !important;
-  max-width: initial;
-  border-bottom: 1px solid $separator-border-color !important;
-}
-
-.root {
-  &.theater-enabled #video-wrapper {
-    flex-direction: column;
-    justify-content: center;
-
-    #videojs-wrapper {
-      width: 100%;
-    }
-
-    ::ng-deep .video-js {
-      $height: calc(100vh - #{$header-height} - #{$theater-bottom-space});
-
-      height: $height;
-      width: 100%;
-      max-width: initial;
-    }
-
-    my-video-watch-playlist ::ng-deep .playlist {
-      @include playlist-below-player;
-    }
-  }
-}
-
-.blocked-label {
-  font-weight: $font-semibold;
-}
-
-#video-wrapper {
-  background-color: #000;
-  display: flex;
-  justify-content: center;
-
-  #videojs-wrapper {
-    display: flex;
-    justify-content: center;
-    flex-grow: 1;
-  }
-
-  .remote-server-down {
-    color: #fff;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    text-align: center;
-    justify-content: center;
-    background-color: #141313;
-    width: 100%;
-    font-size: 24px;
-    height: 500px;
-
-    @media screen and (max-width: 1000px) {
-      font-size: 20px;
-    }
-
-    @media screen and (max-width: 600px) {
-      font-size: 16px;
-    }
-  }
-
-  ::ng-deep .video-js {
-    width: 100%;
-    max-width: getPlayerWidth(66vh);
-    height: 66vh;
-
-    // VideoJS create an inner video player
-    video {
-      outline: 0;
-      position: relative !important;
-    }
-  }
-
-  @media screen and (max-width: 600px) {
-    .remote-server-down,
-    ::ng-deep .video-js {
-      width: 100vw;
-      height: getPlayerHeight(100vw)
-    }
-  }
-}
-
-.alert {
-  text-align: center;
-  border-radius: 0;
-}
-
-.flex-direction-column {
-  flex-direction: column;
-}
-
-#video-not-found {
-  height: 300px;
-  line-height: 300px;
-  margin-top: 50px;
-  text-align: center;
-  font-weight: $font-semibold;
-  font-size: 15px;
-}
-
-.video-bottom {
-  display: flex;
-  margin-top: 1.5rem;
-
-  .video-info {
-    flex-grow: 1;
-    // Set min width for flex item
-    min-width: 1px;
-    max-width: 100%;
-
-    .video-info-first-row {
-      display: flex;
-
-      & > div:first-child {
-        flex-grow: 1;
-      }
-
-      .video-info-name {
-        margin-right: 30px;
-        min-height: 40px; // Align with the action buttons
-        font-size: 27px;
-        font-weight: $font-semibold;
-        flex-grow: 1;
-      }
-
-      .video-info-first-row-bottom {
-        display: flex;
-        flex-wrap: wrap;
-        align-items: center;
-        width: 100%;
-      }
-
-      .video-info-date-views {
-        align-self: start;
-        margin-bottom: 10px;
-        margin-right: 10px;
-        font-size: 1em;
-      }
-
-      .video-info-channel {
-        font-weight: $font-semibold;
-        font-size: 15px;
-
-        a {
-          @include disable-default-a-behaviour;
-
-          color: pvar(--mainForegroundColor);
-
-          &:hover {
-            opacity: 0.8;
-          }
-
-          img {
-            @include avatar(18px);
-
-            margin: -2px 5px 0 0;
-          }
-        }
-
-        .video-info-channel-left {
-          flex-grow: 1;
-
-          .video-info-channel-left-links {
-            display: flex;
-            flex-direction: column;
-            position: relative;
-            line-height: 1.37;
-
-            a:nth-of-type(2) {
-              font-weight: 500;
-              font-size: 90%;
-            }
-          }
-        }
-
-        my-subscribe-button {
-          margin-left: 5px;
-        }
-      }
-
-      my-feed {
-        margin-left: 5px;
-        margin-top: 1px;
-      }
-
-      .video-actions-rates {
-        margin: 0 0 10px 0;
-        align-items: start;
-        width: max-content;
-        margin-left: auto;
-
-        .video-actions {
-          height: 40px; // Align with the title
-          display: flex;
-          align-items: center;
-
-          .action-button:not(:first-child),
-          .action-dropdown,
-          my-video-actions-dropdown {
-            margin-left: 5px;
-          }
-
-          ::ng-deep.action-button {
-            @include peertube-button;
-            @include button-with-icon(21px, 0, -1px);
-            @include apply-svg-color(pvar(--actionButtonColor));
-
-            font-size: 100%;
-            font-weight: $font-semibold;
-            display: inline-block;
-            padding: 0 10px 0 10px;
-            white-space: nowrap;
-            background-color: transparent !important;
-            color: pvar(--actionButtonColor);
-            text-transform: uppercase;
-
-            &::after {
-              display: none;
-            }
-
-            &:hover {
-              opacity: 0.9;
-            }
-
-            &.action-button-like,
-            &.action-button-dislike {
-              filter: brightness(120%);
-
-              .count {
-                margin-right: 5px;
-              }
-            }
-
-            &.action-button-like.activated {
-              .count {
-                color: pvar(--activatedActionButtonColor);
-              }
-
-              my-global-icon {
-                @include apply-svg-color(pvar(--activatedActionButtonColor));
-              }
-            }
-
-            &.action-button-dislike.activated {
-              .count {
-                color: pvar(--activatedActionButtonColor);
-              }
-
-              my-global-icon {
-                @include apply-svg-color(pvar(--activatedActionButtonColor));
-              }
-            }
-
-            &.action-button-support {
-              color: pvar(--supportButtonColor);
-
-              my-global-icon {
-                @include apply-svg-color(pvar(--supportButtonColor));
-              }
-            }
-
-            &.action-button-support {
-              my-global-icon {
-                ::ng-deep path:first-child {
-                  fill: pvar(--supportButtonHeartColor) !important;
-                }
-              }
-            }
-
-            &.action-button-save {
-              my-global-icon {
-                top: 0 !important;
-                right: -1px;
-              }
-            }
-
-            .icon-text {
-              margin-left: 3px;
-            }
-          }
-        }
-
-        .video-info-likes-dislikes-bar-outer-container {
-          position: relative;
-        }
-
-        .video-info-likes-dislikes-bar-inner-container {
-          position: absolute;
-          height: 20px;
-        }
-
-        .video-info-likes-dislikes-bar {
-          $likes-bar-height: 2px;
-          height: $likes-bar-height;
-          margin-top: -$likes-bar-height;
-          width: 120px;
-          background-color: #ccc;
-          position: relative;
-          top: 10px;
-
-          .likes-bar {
-            height: 100%;
-            background-color: #909090;
-
-            &.liked {
-              background-color: pvar(--activatedActionButtonColor);
-            }
-          }
-        }
-      }
-    }
-
-    .video-info-description {
-      margin: 20px 0;
-      margin-left: $video-info-margin-left;
-      font-size: 15px;
-
-      .video-info-description-html {
-        @include peertube-word-wrap;
-
-        /deep/ a {
-          text-decoration: none;
-        }
-      }
-
-      .glyphicon, .description-loading {
-        margin-left: 3px;
-      }
-
-      .description-loading {
-        display: inline-block;
-      }
-
-      .video-info-description-more {
-        cursor: pointer;
-        font-weight: $font-semibold;
-        color: pvar(--greyForegroundColor);
-        font-size: 14px;
-
-        .glyphicon {
-          position: relative;
-          top: 2px;
-        }
-      }
-    }
-
-    .video-attributes {
-      margin-left: $video-info-margin-left;
-    }
-
-    .video-attributes .video-attribute {
-      font-size: 13px;
-      display: block;
-      margin-bottom: 12px;
-
-      .video-attribute-label {
-        min-width: 142px;
-        padding-right: 5px;
-        display: inline-block;
-        color: pvar(--greyForegroundColor);
-        font-weight: $font-bold;
-      }
-
-      a.video-attribute-value {
-        @include disable-default-a-behaviour;
-        color: pvar(--mainForegroundColor);
-
-        &:hover {
-          opacity: 0.9;
-        }
-      }
-
-      &.video-attribute-tags {
-        .video-attribute-value:not(:nth-child(2)) {
-          &::before {
-            content: ', '
-          }
-        }
-      }
-    }
-  }
-
-  ::ng-deep .other-videos {
-    padding-left: 15px;
-    min-width: $video-miniature-width;
-
-    @media screen and (min-width: 1800px - (3* $video-miniature-width)) {
-      width: min-content;
-    }
-
-    .title-page {
-      margin: 0 !important;
-    }
-
-    .video-miniature {
-      display: flex;
-      width: max-content;
-      height: 100%;
-      padding-bottom: 20px;
-      flex-wrap: wrap;
-    }
-
-    .video-bottom {
-      @media screen and (max-width: 1800px - (3* $video-miniature-width)) {
-        margin-left: 1rem;
-      }
-      @media screen and (max-width: 500px) {
-        margin-left: 0;
-        margin-top: .5rem;
-      }
-    }
-  }
-}
-
-my-video-comments {
-  display: inline-block;
-  width: 100%;
-  margin-bottom: 20px;
-}
-
-// If the view is not expanded, take into account the menu
-.privacy-concerns {
-  z-index: z(dropdown) + 1;
-  width: calc(100% - #{$menu-width});
-}
-
-@media screen and (max-width: $small-view) {
-  .privacy-concerns {
-    margin-left: $menu-width - 15px; // Menu is absolute
-  }
-}
-
-:host-context(.expanded) {
-  .privacy-concerns {
-    width: 100%;
-    margin-left: -15px;
-  }
-}
-
-.privacy-concerns {
-  position: fixed;
-  bottom: 0;
-  z-index: z(privacymsg);
-
-  padding: 5px 15px;
-
-  display: flex;
-  flex-wrap: nowrap;
-  align-items: center;
-  justify-content: space-between;
-  background-color: rgba(0, 0, 0, 0.9);
-  color: #fff;
-
-  .privacy-concerns-text {
-    margin: 0 5px;
-  }
-
-  a {
-    @include disable-default-a-behaviour;
-
-    color: pvar(--mainColor);
-    transition: color 0.3s;
-
-    &:hover {
-      color: #fff;
-    }
-  }
-
-  .privacy-concerns-button {
-    padding: 5px 8px 5px 7px;
-    margin-left: auto;
-    border-radius: 3px;
-    white-space: nowrap;
-    cursor: pointer;
-    transition: background-color 0.3s;
-    font-weight: $font-semibold;
-
-    &:hover {
-      background-color: #000;
-    }
-  }
-
-  .privacy-concerns-okay {
-    background-color: pvar(--mainColor);
-    margin-left: 10px;
-  }
-}
-
-@media screen and (max-width: 1600px) {
-  .video-bottom .video-info .video-attributes .video-attribute {
-    margin-bottom: 5px;
-  }
-}
-
-@media screen and (max-width: 1300px) {
-  .privacy-concerns {
-    font-size: 12px;
-    padding: 2px 5px;
-
-    .privacy-concerns-text {
-      margin: 0;
-    }
-  }
-}
-
-@media screen and (max-width: 1100px) {
-  #video-wrapper {
-    flex-direction: column;
-    justify-content: center;
-
-    my-video-watch-playlist ::ng-deep .playlist {
-      @include playlist-below-player;
-    }
-  }
-
-  .video-bottom {
-    flex-direction: column;
-
-    ::ng-deep .other-videos {
-      padding-left: 0 !important;
-
-      ::ng-deep .video-miniature  {
-        flex-direction: row;
-        width: auto;
-      }
-    }
-  }
-}
-
-@media screen and (max-width: 600px) {
-  .video-bottom {
-    margin-top: 20px !important;
-    padding-bottom: 20px !important;
-
-    .video-info {
-      padding: 0;
-
-      .video-info-first-row {
-
-        .video-info-name {
-          font-size: 20px;
-          height: auto;
-        }
-      }
-    }
-  }
-
-  ::ng-deep .other-videos .video-miniature  {
-    flex-direction: column;
-  }
-
-  .privacy-concerns {
-    width: 100%;
-
-    strong {
-      display: none;
-    }
-  }
-}
-
-@media screen and (max-width: 450px) {
-  .video-bottom {
-    .action-button .icon-text {
-      display: none !important;
-    }
-
-    .video-info .video-info-first-row {
-      .video-info-name {
-        font-size: 18px;
-      }
-
-      .video-info-date-views {
-        font-size: 14px;
-      }
-
-      .video-actions-rates {
-        margin-top: 10px;
-      }
-    }
-
-    .video-info-description {
-      font-size: 14px !important;
-    }
-  }
-}
diff --git a/client/src/app/videos/+video-watch/video-watch.component.ts b/client/src/app/videos/+video-watch/video-watch.component.ts
deleted file mode 100644
index 5b0b34c80..000000000
--- a/client/src/app/videos/+video-watch/video-watch.component.ts
+++ /dev/null
@@ -1,782 +0,0 @@
-import { Hotkey, HotkeysService } from 'angular2-hotkeys'
-import { forkJoin, Observable, Subscription } from 'rxjs'
-import { catchError } from 'rxjs/operators'
-import { PlatformLocation } from '@angular/common'
-import { ChangeDetectorRef, Component, ElementRef, Inject, LOCALE_ID, NgZone, OnDestroy, OnInit, ViewChild } from '@angular/core'
-import { ActivatedRoute, Router } from '@angular/router'
-import { AuthService, AuthUser, ConfirmService, MarkdownService, Notifier, RestExtractor, ServerService, UserService } from '@app/core'
-import { HooksService } from '@app/core/plugins/hooks.service'
-import { RedirectService } from '@app/core/routing/redirect.service'
-import { isXPercentInViewport, peertubeLocalStorage, scrollToTop } from '@app/helpers'
-import { Video, VideoCaptionService, VideoDetails, VideoService } from '@app/shared/shared-main'
-import { SubscribeButtonComponent } from '@app/shared/shared-user-subscription'
-import { VideoPlaylist, VideoPlaylistService } from '@app/shared/shared-video-playlist'
-import { MetaService } from '@ngx-meta/core'
-import { I18n } from '@ngx-translate/i18n-polyfill'
-import { ServerConfig, UserVideoRateType, VideoCaption, VideoPrivacy, VideoState } from '@shared/models'
-import { getStoredP2PEnabled, getStoredTheater } from '../../../assets/player/peertube-player-local-storage'
-import {
-  CustomizationOptions,
-  P2PMediaLoaderOptions,
-  PeertubePlayerManager,
-  PeertubePlayerManagerOptions,
-  PlayerMode,
-  videojs
-} from '../../../assets/player/peertube-player-manager'
-import { isWebRTCDisabled, timeToInt } from '../../../assets/player/utils'
-import { environment } from '../../../environments/environment'
-import { VideoShareComponent } from './modal/video-share.component'
-import { VideoSupportComponent } from './modal/video-support.component'
-import { VideoWatchPlaylistComponent } from './video-watch-playlist.component'
-
-@Component({
-  selector: 'my-video-watch',
-  templateUrl: './video-watch.component.html',
-  styleUrls: [ './video-watch.component.scss' ]
-})
-export class VideoWatchComponent implements OnInit, OnDestroy {
-  private static LOCAL_STORAGE_PRIVACY_CONCERN_KEY = 'video-watch-privacy-concern'
-
-  @ViewChild('videoWatchPlaylist', { static: true }) videoWatchPlaylist: VideoWatchPlaylistComponent
-  @ViewChild('videoShareModal') videoShareModal: VideoShareComponent
-  @ViewChild('videoSupportModal') videoSupportModal: VideoSupportComponent
-  @ViewChild('subscribeButton') subscribeButton: SubscribeButtonComponent
-
-  player: any
-  playerElement: HTMLVideoElement
-  theaterEnabled = false
-  userRating: UserVideoRateType = null
-  descriptionLoading = false
-
-  video: VideoDetails = null
-  videoCaptions: VideoCaption[] = []
-
-  playlist: VideoPlaylist = null
-
-  completeDescriptionShown = false
-  completeVideoDescription: string
-  shortVideoDescription: string
-  videoHTMLDescription = ''
-  likesBarTooltipText = ''
-  hasAlreadyAcceptedPrivacyConcern = false
-  remoteServerDown = false
-  hotkeys: Hotkey[] = []
-
-  tooltipLike = ''
-  tooltipDislike = ''
-  tooltipSupport = ''
-  tooltipSaveToPlaylist = ''
-
-  private nextVideoUuid = ''
-  private nextVideoTitle = ''
-  private currentTime: number
-  private paramsSub: Subscription
-  private queryParamsSub: Subscription
-  private configSub: Subscription
-
-  private serverConfig: ServerConfig
-
-  constructor (
-    private elementRef: ElementRef,
-    private changeDetector: ChangeDetectorRef,
-    private route: ActivatedRoute,
-    private router: Router,
-    private videoService: VideoService,
-    private playlistService: VideoPlaylistService,
-    private confirmService: ConfirmService,
-    private metaService: MetaService,
-    private authService: AuthService,
-    private userService: UserService,
-    private serverService: ServerService,
-    private restExtractor: RestExtractor,
-    private notifier: Notifier,
-    private markdownService: MarkdownService,
-    private zone: NgZone,
-    private redirectService: RedirectService,
-    private videoCaptionService: VideoCaptionService,
-    private i18n: I18n,
-    private hotkeysService: HotkeysService,
-    private hooks: HooksService,
-    private location: PlatformLocation,
-    @Inject(LOCALE_ID) private localeId: string
-  ) {
-    this.tooltipLike = this.i18n('Like this video')
-    this.tooltipDislike = this.i18n('Dislike this video')
-    this.tooltipSupport = this.i18n('Support options for this video')
-    this.tooltipSaveToPlaylist = this.i18n('Save to playlist')
-  }
-
-  get user () {
-    return this.authService.getUser()
-  }
-
-  get anonymousUser () {
-    return this.userService.getAnonymousUser()
-  }
-
-  async ngOnInit () {
-    this.serverConfig = this.serverService.getTmpConfig()
-
-    this.configSub = this.serverService.getConfig()
-        .subscribe(config => {
-          this.serverConfig = config
-
-          if (
-            isWebRTCDisabled() ||
-            this.serverConfig.tracker.enabled === false ||
-            getStoredP2PEnabled() === false ||
-            peertubeLocalStorage.getItem(VideoWatchComponent.LOCAL_STORAGE_PRIVACY_CONCERN_KEY) === 'true'
-          ) {
-            this.hasAlreadyAcceptedPrivacyConcern = true
-          }
-        })
-
-    this.paramsSub = this.route.params.subscribe(routeParams => {
-      const videoId = routeParams[ 'videoId' ]
-      if (videoId) this.loadVideo(videoId)
-
-      const playlistId = routeParams[ 'playlistId' ]
-      if (playlistId) this.loadPlaylist(playlistId)
-    })
-
-    this.queryParamsSub = this.route.queryParams.subscribe(async queryParams => {
-      const videoId = queryParams[ 'videoId' ]
-      if (videoId) this.loadVideo(videoId)
-
-      const start = queryParams[ 'start' ]
-      if (this.player && start) this.player.currentTime(parseInt(start, 10))
-    })
-
-    this.initHotkeys()
-
-    this.theaterEnabled = getStoredTheater()
-
-    this.hooks.runAction('action:video-watch.init', 'video-watch')
-  }
-
-  ngOnDestroy () {
-    this.flushPlayer()
-
-    // Unsubscribe subscriptions
-    if (this.paramsSub) this.paramsSub.unsubscribe()
-    if (this.queryParamsSub) this.queryParamsSub.unsubscribe()
-
-    // Unbind hotkeys
-    this.hotkeysService.remove(this.hotkeys)
-  }
-
-  setLike () {
-    if (this.isUserLoggedIn() === false) return
-
-    // Already liked this video
-    if (this.userRating === 'like') this.setRating('none')
-    else this.setRating('like')
-  }
-
-  setDislike () {
-    if (this.isUserLoggedIn() === false) return
-
-    // Already disliked this video
-    if (this.userRating === 'dislike') this.setRating('none')
-    else this.setRating('dislike')
-  }
-
-  getRatePopoverText () {
-    if (this.isUserLoggedIn()) return undefined
-
-    return this.i18n('You need to be connected to rate this content.')
-  }
-
-  showMoreDescription () {
-    if (this.completeVideoDescription === undefined) {
-      return this.loadCompleteDescription()
-    }
-
-    this.updateVideoDescription(this.completeVideoDescription)
-    this.completeDescriptionShown = true
-  }
-
-  showLessDescription () {
-    this.updateVideoDescription(this.shortVideoDescription)
-    this.completeDescriptionShown = false
-  }
-
-  loadCompleteDescription () {
-    this.descriptionLoading = true
-
-    this.videoService.loadCompleteDescription(this.video.descriptionPath)
-        .subscribe(
-          description => {
-            this.completeDescriptionShown = true
-            this.descriptionLoading = false
-
-            this.shortVideoDescription = this.video.description
-            this.completeVideoDescription = description
-
-            this.updateVideoDescription(this.completeVideoDescription)
-          },
-
-          error => {
-            this.descriptionLoading = false
-            this.notifier.error(error.message)
-          }
-        )
-  }
-
-  showSupportModal () {
-    this.pausePlayer()
-
-    this.videoSupportModal.show()
-  }
-
-  showShareModal () {
-    this.pausePlayer()
-
-    this.videoShareModal.show(this.currentTime)
-  }
-
-  isUserLoggedIn () {
-    return this.authService.isLoggedIn()
-  }
-
-  getVideoTags () {
-    if (!this.video || Array.isArray(this.video.tags) === false) return []
-
-    return this.video.tags
-  }
-
-  onRecommendations (videos: Video[]) {
-    if (videos.length > 0) {
-      // The recommended videos's first element should be the next video
-      const video = videos[0]
-      this.nextVideoUuid = video.uuid
-      this.nextVideoTitle = video.name
-    }
-  }
-
-  onModalOpened () {
-    this.pausePlayer()
-  }
-
-  onVideoRemoved () {
-    this.redirectService.redirectToHomepage()
-  }
-
-  declinedPrivacyConcern () {
-    peertubeLocalStorage.setItem(VideoWatchComponent.LOCAL_STORAGE_PRIVACY_CONCERN_KEY, 'false')
-    this.hasAlreadyAcceptedPrivacyConcern = false
-  }
-
-  acceptedPrivacyConcern () {
-    peertubeLocalStorage.setItem(VideoWatchComponent.LOCAL_STORAGE_PRIVACY_CONCERN_KEY, 'true')
-    this.hasAlreadyAcceptedPrivacyConcern = true
-  }
-
-  isVideoToTranscode () {
-    return this.video && this.video.state.id === VideoState.TO_TRANSCODE
-  }
-
-  isVideoToImport () {
-    return this.video && this.video.state.id === VideoState.TO_IMPORT
-  }
-
-  hasVideoScheduledPublication () {
-    return this.video && this.video.scheduledUpdate !== undefined
-  }
-
-  isVideoBlur (video: Video) {
-    return video.isVideoNSFWForUser(this.user, this.serverConfig)
-  }
-
-  isAutoPlayEnabled () {
-    return (
-      (this.user && this.user.autoPlayNextVideo) ||
-      this.anonymousUser.autoPlayNextVideo
-    )
-  }
-
-  handleTimestampClicked (timestamp: number) {
-    if (this.player) this.player.currentTime(timestamp)
-    scrollToTop()
-  }
-
-  isPlaylistAutoPlayEnabled () {
-    return (
-      (this.user && this.user.autoPlayNextVideoPlaylist) ||
-      this.anonymousUser.autoPlayNextVideoPlaylist
-    )
-  }
-
-  private loadVideo (videoId: string) {
-    // Video did not change
-    if (this.video && this.video.uuid === videoId) return
-
-    if (this.player) this.player.pause()
-
-    const videoObs = this.hooks.wrapObsFun(
-      this.videoService.getVideo.bind(this.videoService),
-      { videoId },
-      'video-watch',
-      'filter:api.video-watch.video.get.params',
-      'filter:api.video-watch.video.get.result'
-    )
-
-    // Video did change
-    forkJoin([
-      videoObs,
-      this.videoCaptionService.listCaptions(videoId)
-    ])
-      .pipe(
-        // If 401, the video is private or blocked so redirect to 404
-        catchError(err => this.restExtractor.redirectTo404IfNotFound(err, [ 400, 401, 403, 404 ]))
-      )
-      .subscribe(([ video, captionsResult ]) => {
-        const queryParams = this.route.snapshot.queryParams
-
-        const urlOptions = {
-          startTime: queryParams.start,
-          stopTime: queryParams.stop,
-
-          muted: queryParams.muted,
-          loop: queryParams.loop,
-          subtitle: queryParams.subtitle,
-
-          playerMode: queryParams.mode,
-          peertubeLink: false
-        }
-
-        this.onVideoFetched(video, captionsResult.data, urlOptions)
-            .catch(err => this.handleError(err))
-      })
-  }
-
-  private loadPlaylist (playlistId: string) {
-    // Playlist did not change
-    if (this.playlist && this.playlist.uuid === playlistId) return
-
-    this.playlistService.getVideoPlaylist(playlistId)
-      .pipe(
-        // If 401, the video is private or blocked so redirect to 404
-        catchError(err => this.restExtractor.redirectTo404IfNotFound(err, [ 400, 401, 403, 404 ]))
-      )
-      .subscribe(playlist => {
-        this.playlist = playlist
-
-        const videoId = this.route.snapshot.queryParams['videoId']
-        this.videoWatchPlaylist.loadPlaylistElements(playlist, !videoId)
-      })
-  }
-
-  private updateVideoDescription (description: string) {
-    this.video.description = description
-    this.setVideoDescriptionHTML()
-      .catch(err => console.error(err))
-  }
-
-  private async setVideoDescriptionHTML () {
-    const html = await this.markdownService.textMarkdownToHTML(this.video.description)
-    this.videoHTMLDescription = await this.markdownService.processVideoTimestamps(html)
-  }
-
-  private setVideoLikesBarTooltipText () {
-    this.likesBarTooltipText = this.i18n('{{likesNumber}} likes / {{dislikesNumber}} dislikes', {
-      likesNumber: this.video.likes,
-      dislikesNumber: this.video.dislikes
-    })
-  }
-
-  private handleError (err: any) {
-    const errorMessage: string = typeof err === 'string' ? err : err.message
-    if (!errorMessage) return
-
-    // Display a message in the video player instead of a notification
-    if (errorMessage.indexOf('from xs param') !== -1) {
-      this.flushPlayer()
-      this.remoteServerDown = true
-      this.changeDetector.detectChanges()
-
-      return
-    }
-
-    this.notifier.error(errorMessage)
-  }
-
-  private checkUserRating () {
-    // Unlogged users do not have ratings
-    if (this.isUserLoggedIn() === false) return
-
-    this.videoService.getUserVideoRating(this.video.id)
-        .subscribe(
-          ratingObject => {
-            if (ratingObject) {
-              this.userRating = ratingObject.rating
-            }
-          },
-
-          err => this.notifier.error(err.message)
-        )
-  }
-
-  private async onVideoFetched (
-    video: VideoDetails,
-    videoCaptions: VideoCaption[],
-    urlOptions: CustomizationOptions & { playerMode: PlayerMode }
-  ) {
-    this.video = video
-    this.videoCaptions = videoCaptions
-
-    // Re init attributes
-    this.descriptionLoading = false
-    this.completeDescriptionShown = false
-    this.remoteServerDown = false
-    this.currentTime = undefined
-
-    this.videoWatchPlaylist.updatePlaylistIndex(video)
-
-    if (this.isVideoBlur(this.video)) {
-      const res = await this.confirmService.confirm(
-        this.i18n('This video contains mature or explicit content. Are you sure you want to watch it?'),
-        this.i18n('Mature or explicit content')
-      )
-      if (res === false) return this.location.back()
-    }
-
-    // Flush old player if needed
-    this.flushPlayer()
-
-    // Build video element, because videojs removes it on dispose
-    const playerElementWrapper = this.elementRef.nativeElement.querySelector('#videojs-wrapper')
-    this.playerElement = document.createElement('video')
-    this.playerElement.className = 'video-js vjs-peertube-skin'
-    this.playerElement.setAttribute('playsinline', 'true')
-    playerElementWrapper.appendChild(this.playerElement)
-
-    const params = {
-      video: this.video,
-      videoCaptions,
-      urlOptions,
-      user: this.user
-    }
-    const { playerMode, playerOptions } = await this.hooks.wrapFun(
-      this.buildPlayerManagerOptions.bind(this),
-      params,
-      'video-watch',
-      'filter:internal.video-watch.player.build-options.params',
-      'filter:internal.video-watch.player.build-options.result'
-    )
-
-    this.zone.runOutsideAngular(async () => {
-      this.player = await PeertubePlayerManager.initialize(playerMode, playerOptions, player => this.player = player)
-      this.player.focus()
-
-      this.player.on('customError', ({ err }: { err: any }) => this.handleError(err))
-
-      this.player.on('timeupdate', () => {
-        this.currentTime = Math.floor(this.player.currentTime())
-      })
-
-      /**
-       * replaces this.player.one('ended')
-       * 'condition()': true to make the upnext functionality trigger,
-       *                false to disable the upnext functionality
-       * go to the next video in 'condition()' if you don't want of the timer.
-       * 'next': function triggered at the end of the timer.
-       * 'suspended': function used at each clic of the timer checking if we need
-       * to reset progress and wait until 'suspended' becomes truthy again.
-       */
-      this.player.upnext({
-        timeout: 10000, // 10s
-        headText: this.i18n('Up Next'),
-        cancelText: this.i18n('Cancel'),
-        suspendedText: this.i18n('Autoplay is suspended'),
-        getTitle: () => this.nextVideoTitle,
-        next: () => this.zone.run(() => this.autoplayNext()),
-        condition: () => {
-          if (this.playlist) {
-            if (this.isPlaylistAutoPlayEnabled()) {
-              // upnext will not trigger, and instead the next video will play immediately
-              this.zone.run(() => this.videoWatchPlaylist.navigateToNextPlaylistVideo())
-            }
-          } else if (this.isAutoPlayEnabled()) {
-            return true // upnext will trigger
-          }
-          return false // upnext will not trigger, and instead leave the video stopping
-        },
-        suspended: () => {
-          return (
-            !isXPercentInViewport(this.player.el(), 80) ||
-            !document.getElementById('content').contains(document.activeElement)
-          )
-        }
-      })
-
-      this.player.one('stopped', () => {
-        if (this.playlist) {
-          if (this.isPlaylistAutoPlayEnabled()) this.zone.run(() => this.videoWatchPlaylist.navigateToNextPlaylistVideo())
-        }
-      })
-
-      this.player.on('theaterChange', (_: any, enabled: boolean) => {
-        this.zone.run(() => this.theaterEnabled = enabled)
-      })
-
-      this.hooks.runAction('action:video-watch.player.loaded', 'video-watch', { player: this.player })
-    })
-
-    this.setVideoDescriptionHTML()
-    this.setVideoLikesBarTooltipText()
-
-    this.setOpenGraphTags()
-    this.checkUserRating()
-
-    this.hooks.runAction('action:video-watch.video.loaded', 'video-watch', { videojs })
-  }
-
-  private autoplayNext () {
-    if (this.playlist) {
-      this.zone.run(() => this.videoWatchPlaylist.navigateToNextPlaylistVideo())
-    } else if (this.nextVideoUuid) {
-      this.router.navigate([ '/videos/watch', this.nextVideoUuid ])
-    }
-  }
-
-  private setRating (nextRating: UserVideoRateType) {
-    const ratingMethods: { [id in UserVideoRateType]: (id: number) => Observable<any> } = {
-      like: this.videoService.setVideoLike,
-      dislike: this.videoService.setVideoDislike,
-      none: this.videoService.unsetVideoLike
-    }
-
-    ratingMethods[nextRating].call(this.videoService, this.video.id)
-          .subscribe(
-            () => {
-              // Update the video like attribute
-              this.updateVideoRating(this.userRating, nextRating)
-              this.userRating = nextRating
-            },
-
-            (err: { message: string }) => this.notifier.error(err.message)
-          )
-  }
-
-  private updateVideoRating (oldRating: UserVideoRateType, newRating: UserVideoRateType) {
-    let likesToIncrement = 0
-    let dislikesToIncrement = 0
-
-    if (oldRating) {
-      if (oldRating === 'like') likesToIncrement--
-      if (oldRating === 'dislike') dislikesToIncrement--
-    }
-
-    if (newRating === 'like') likesToIncrement++
-    if (newRating === 'dislike') dislikesToIncrement++
-
-    this.video.likes += likesToIncrement
-    this.video.dislikes += dislikesToIncrement
-
-    this.video.buildLikeAndDislikePercents()
-    this.setVideoLikesBarTooltipText()
-  }
-
-  private setOpenGraphTags () {
-    this.metaService.setTitle(this.video.name)
-
-    this.metaService.setTag('og:type', 'video')
-
-    this.metaService.setTag('og:title', this.video.name)
-    this.metaService.setTag('name', this.video.name)
-
-    this.metaService.setTag('og:description', this.video.description)
-    this.metaService.setTag('description', this.video.description)
-
-    this.metaService.setTag('og:image', this.video.previewPath)
-
-    this.metaService.setTag('og:duration', this.video.duration.toString())
-
-    this.metaService.setTag('og:site_name', 'PeerTube')
-
-    this.metaService.setTag('og:url', window.location.href)
-    this.metaService.setTag('url', window.location.href)
-  }
-
-  private isAutoplay () {
-    // We'll jump to the thread id, so do not play the video
-    if (this.route.snapshot.params['threadId']) return false
-
-    // Otherwise true by default
-    if (!this.user) return true
-
-    // Be sure the autoPlay is set to false
-    return this.user.autoPlayVideo !== false
-  }
-
-  private flushPlayer () {
-    // Remove player if it exists
-    if (this.player) {
-      try {
-        this.player.dispose()
-        this.player = undefined
-      } catch (err) {
-        console.error('Cannot dispose player.', err)
-      }
-    }
-  }
-
-  private buildPlayerManagerOptions (params: {
-    video: VideoDetails,
-    videoCaptions: VideoCaption[],
-    urlOptions: CustomizationOptions & { playerMode: PlayerMode },
-    user?: AuthUser
-  }) {
-    const { video, videoCaptions, urlOptions, user } = params
-    const getStartTime = () => {
-      const byUrl = urlOptions.startTime !== undefined
-      const byHistory = video.userHistory && (!this.playlist || urlOptions.resume !== undefined)
-
-      if (byUrl) {
-        return timeToInt(urlOptions.startTime)
-      } else if (byHistory) {
-        return video.userHistory.currentTime
-      } else {
-        return 0
-      }
-    }
-
-    let startTime = getStartTime()
-    // If we are at the end of the video, reset the timer
-    if (video.duration - startTime <= 1) startTime = 0
-
-    const playerCaptions = videoCaptions.map(c => ({
-      label: c.language.label,
-      language: c.language.id,
-      src: environment.apiUrl + c.captionPath
-    }))
-
-    const options: PeertubePlayerManagerOptions = {
-      common: {
-        autoplay: this.isAutoplay(),
-        nextVideo: () => this.zone.run(() => this.autoplayNext()),
-
-        playerElement: this.playerElement,
-        onPlayerElementChange: (element: HTMLVideoElement) => this.playerElement = element,
-
-        videoDuration: video.duration,
-        enableHotkeys: true,
-        inactivityTimeout: 2500,
-        poster: video.previewUrl,
-
-        startTime,
-        stopTime: urlOptions.stopTime,
-        controls: urlOptions.controls,
-        muted: urlOptions.muted,
-        loop: urlOptions.loop,
-        subtitle: urlOptions.subtitle,
-
-        peertubeLink: urlOptions.peertubeLink,
-
-        theaterButton: true,
-        captions: videoCaptions.length !== 0,
-
-        videoViewUrl: video.privacy.id !== VideoPrivacy.PRIVATE
-          ? this.videoService.getVideoViewUrl(video.uuid)
-          : null,
-        embedUrl: video.embedUrl,
-
-        language: this.localeId,
-
-        userWatching: user && user.videosHistoryEnabled === true ? {
-          url: this.videoService.getUserWatchingVideoUrl(video.uuid),
-          authorizationHeader: this.authService.getRequestHeaderValue()
-        } : undefined,
-
-        serverUrl: environment.apiUrl,
-
-        videoCaptions: playerCaptions
-      },
-
-      webtorrent: {
-        videoFiles: video.files
-      }
-    }
-
-    let mode: PlayerMode
-
-    if (urlOptions.playerMode) {
-      if (urlOptions.playerMode === 'p2p-media-loader') mode = 'p2p-media-loader'
-      else mode = 'webtorrent'
-    } else {
-      if (video.hasHlsPlaylist()) mode = 'p2p-media-loader'
-      else mode = 'webtorrent'
-    }
-
-    // p2p-media-loader needs TextEncoder, try to fallback on WebTorrent
-    if (typeof TextEncoder === 'undefined') {
-      mode = 'webtorrent'
-    }
-
-    if (mode === 'p2p-media-loader') {
-      const hlsPlaylist = video.getHlsPlaylist()
-
-      const p2pMediaLoader = {
-        playlistUrl: hlsPlaylist.playlistUrl,
-        segmentsSha256Url: hlsPlaylist.segmentsSha256Url,
-        redundancyBaseUrls: hlsPlaylist.redundancies.map(r => r.baseUrl),
-        trackerAnnounce: video.trackerUrls,
-        videoFiles: hlsPlaylist.files
-      } as P2PMediaLoaderOptions
-
-      Object.assign(options, { p2pMediaLoader })
-    }
-
-    return { playerMode: mode, playerOptions: options }
-  }
-
-  private pausePlayer () {
-    if (!this.player) return
-
-    this.player.pause()
-  }
-
-  private initHotkeys () {
-    this.hotkeys = [
-      // These hotkeys are managed by the player
-      new Hotkey('f', e => e, undefined, this.i18n('Enter/exit fullscreen (requires player focus)')),
-      new Hotkey('space', e => e, undefined, this.i18n('Play/Pause the video (requires player focus)')),
-      new Hotkey('m', e => e, undefined, this.i18n('Mute/unmute the video (requires player focus)')),
-
-      new Hotkey('0-9', e => e, undefined, this.i18n('Skip to a percentage of the video: 0 is 0% and 9 is 90% (requires player focus)')),
-
-      new Hotkey('up', e => e, undefined, this.i18n('Increase the volume (requires player focus)')),
-      new Hotkey('down', e => e, undefined, this.i18n('Decrease the volume (requires player focus)')),
-
-      new Hotkey('right', e => e, undefined, this.i18n('Seek the video forward (requires player focus)')),
-      new Hotkey('left', e => e, undefined, this.i18n('Seek the video backward (requires player focus)')),
-
-      new Hotkey('>', e => e, undefined, this.i18n('Increase playback rate (requires player focus)')),
-      new Hotkey('<', e => e, undefined, this.i18n('Decrease playback rate (requires player focus)')),
-
-      new Hotkey('.', e => e, undefined, this.i18n('Navigate in the video frame by frame (requires player focus)'))
-    ]
-
-    if (this.isUserLoggedIn()) {
-      this.hotkeys = this.hotkeys.concat([
-        new Hotkey('shift+l', () => {
-          this.setLike()
-          return false
-        }, undefined, this.i18n('Like the video')),
-
-        new Hotkey('shift+d', () => {
-          this.setDislike()
-          return false
-        }, undefined, this.i18n('Dislike the video')),
-
-        new Hotkey('shift+s', () => {
-          this.subscribeButton.subscribed ? this.subscribeButton.unsubscribe() : this.subscribeButton.subscribe()
-          return false
-        }, undefined, this.i18n('Subscribe to the account'))
-      ])
-    }
-
-    this.hotkeysService.add(this.hotkeys)
-  }
-}
diff --git a/client/src/app/videos/+video-watch/video-watch.module.ts b/client/src/app/videos/+video-watch/video-watch.module.ts
deleted file mode 100644
index a1c54f065..000000000
--- a/client/src/app/videos/+video-watch/video-watch.module.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-import { QRCodeModule } from 'angularx-qrcode'
-import { NgModule } from '@angular/core'
-import { SharedFormModule } from '@app/shared/shared-forms'
-import { SharedGlobalIconModule } from '@app/shared/shared-icons'
-import { SharedMainModule } from '@app/shared/shared-main'
-import { SharedModerationModule } from '@app/shared/shared-moderation'
-import { SharedUserSubscriptionModule } from '@app/shared/shared-user-subscription'
-import { SharedVideoMiniatureModule } from '@app/shared/shared-video-miniature'
-import { SharedVideoPlaylistModule } from '@app/shared/shared-video-playlist'
-import { RecommendationsModule } from '@app/videos/recommendations/recommendations.module'
-import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap'
-import { VideoCommentAddComponent } from './comment/video-comment-add.component'
-import { VideoCommentComponent } from './comment/video-comment.component'
-import { VideoCommentService } from './comment/video-comment.service'
-import { VideoCommentsComponent } from './comment/video-comments.component'
-import { VideoShareComponent } from './modal/video-share.component'
-import { VideoSupportComponent } from './modal/video-support.component'
-import { TimestampRouteTransformerDirective } from './timestamp-route-transformer.directive'
-import { VideoDurationPipe } from './video-duration-formatter.pipe'
-import { VideoWatchPlaylistComponent } from './video-watch-playlist.component'
-import { VideoWatchRoutingModule } from './video-watch-routing.module'
-import { VideoWatchComponent } from './video-watch.component'
-
-@NgModule({
-  imports: [
-    VideoWatchRoutingModule,
-    NgbTooltipModule,
-    QRCodeModule,
-    RecommendationsModule,
-
-    SharedMainModule,
-    SharedFormModule,
-    SharedVideoMiniatureModule,
-    SharedVideoPlaylistModule,
-    SharedUserSubscriptionModule,
-    SharedModerationModule,
-    SharedGlobalIconModule
-  ],
-
-  declarations: [
-    VideoWatchComponent,
-    VideoWatchPlaylistComponent,
-
-    VideoShareComponent,
-    VideoSupportComponent,
-    VideoCommentsComponent,
-    VideoCommentAddComponent,
-    VideoCommentComponent,
-
-    TimestampRouteTransformerDirective,
-    VideoDurationPipe,
-    TimestampRouteTransformerDirective
-  ],
-
-  exports: [
-    VideoWatchComponent,
-
-    TimestampRouteTransformerDirective
-  ],
-
-  providers: [
-    VideoCommentService
-  ]
-})
-export class VideoWatchModule { }
diff --git a/client/src/app/videos/index.ts b/client/src/app/videos/index.ts
deleted file mode 100644
index 028a5854b..000000000
--- a/client/src/app/videos/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './videos.module'
diff --git a/client/src/app/videos/recommendations/recent-videos-recommendation.service.ts b/client/src/app/videos/recommendations/recent-videos-recommendation.service.ts
deleted file mode 100644
index a376453bf..000000000
--- a/client/src/app/videos/recommendations/recent-videos-recommendation.service.ts
+++ /dev/null
@@ -1,82 +0,0 @@
-import { Observable, of } from 'rxjs'
-import { map, switchMap } from 'rxjs/operators'
-import { Injectable } from '@angular/core'
-import { ServerService, UserService } from '@app/core'
-import { AdvancedSearch } from '@app/search/advanced-search.model'
-import { SearchService } from '@app/search/search.service'
-import { Video, VideoService } from '@app/shared/shared-main'
-import { ServerConfig } from '@shared/models'
-import { RecommendationInfo } from './recommendation-info.model'
-import { RecommendationService } from './recommendations.service'
-
-/**
- * Provides "recommendations" by providing the most recently uploaded videos.
- */
-@Injectable()
-export class RecentVideosRecommendationService implements RecommendationService {
-  readonly pageSize = 5
-
-  private config: ServerConfig
-
-  constructor (
-    private videos: VideoService,
-    private searchService: SearchService,
-    private userService: UserService,
-    private serverService: ServerService
-  ) {
-    this.config = this.serverService.getTmpConfig()
-
-    this.serverService.getConfig()
-     .subscribe(config => this.config = config)
-  }
-
-  getRecommendations (recommendation: RecommendationInfo): Observable<Video[]> {
-    return this.fetchPage(1, recommendation)
-      .pipe(
-        map(videos => {
-          const otherVideos = videos.filter(v => v.uuid !== recommendation.uuid)
-          return otherVideos.slice(0, this.pageSize)
-        })
-      )
-  }
-
-  private fetchPage (page: number, recommendation: RecommendationInfo): Observable<Video[]> {
-    const pagination = { currentPage: page, itemsPerPage: this.pageSize + 1 }
-    const defaultSubscription = this.videos.getVideos({ videoPagination: pagination, sort: '-createdAt' })
-                                    .pipe(map(v => v.data))
-
-    const tags = recommendation.tags
-    const searchIndexConfig = this.config.search.searchIndex
-    if (
-      !tags || tags.length === 0 ||
-      (searchIndexConfig.enabled === true && searchIndexConfig.disableLocalSearch === true)
-    ) {
-      return defaultSubscription
-    }
-
-    return this.userService.getAnonymousOrLoggedUser()
-      .pipe(
-        map(user => {
-          return {
-            search: '',
-            componentPagination: pagination,
-            advancedSearch: new AdvancedSearch({
-              tagsOneOf: recommendation.tags.join(','),
-              sort: '-createdAt',
-              searchTarget: 'local',
-              nsfw: user.nsfwPolicy
-                ? this.videos.nsfwPolicyToParam(user.nsfwPolicy)
-                : undefined
-            })
-          }
-        }),
-        switchMap(params => this.searchService.searchVideos(params)),
-        map(v => v.data),
-        switchMap(videos => {
-          if (videos.length <= 1) return defaultSubscription
-
-          return of(videos)
-        })
-      )
-  }
-}
diff --git a/client/src/app/videos/recommendations/recommendation-info.model.ts b/client/src/app/videos/recommendations/recommendation-info.model.ts
deleted file mode 100644
index 0233563bb..000000000
--- a/client/src/app/videos/recommendations/recommendation-info.model.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export interface RecommendationInfo {
-  uuid: string
-  tags?: string[]
-}
diff --git a/client/src/app/videos/recommendations/recommendations.module.ts b/client/src/app/videos/recommendations/recommendations.module.ts
deleted file mode 100644
index 03cc272ca..000000000
--- a/client/src/app/videos/recommendations/recommendations.module.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { InputSwitchModule } from 'primeng/inputswitch'
-import { CommonModule } from '@angular/common'
-import { NgModule } from '@angular/core'
-import { SharedMainModule } from '@app/shared/shared-main'
-import { SharedVideoMiniatureModule } from '@app/shared/shared-video-miniature'
-import { SharedVideoPlaylistModule } from '@app/shared/shared-video-playlist'
-import { RecentVideosRecommendationService } from './recent-videos-recommendation.service'
-import { RecommendedVideosComponent } from './recommended-videos.component'
-import { RecommendedVideosStore } from './recommended-videos.store'
-
-@NgModule({
-  imports: [
-    CommonModule,
-    InputSwitchModule,
-
-    SharedMainModule,
-    SharedVideoPlaylistModule,
-    SharedVideoMiniatureModule
-  ],
-  declarations: [
-    RecommendedVideosComponent
-  ],
-  exports: [
-    RecommendedVideosComponent
-  ],
-  providers: [
-    RecommendedVideosStore,
-    RecentVideosRecommendationService
-  ]
-})
-export class RecommendationsModule {
-}
diff --git a/client/src/app/videos/recommendations/recommendations.service.ts b/client/src/app/videos/recommendations/recommendations.service.ts
deleted file mode 100644
index 1d79d35f6..000000000
--- a/client/src/app/videos/recommendations/recommendations.service.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { Observable } from 'rxjs'
-import { Video } from '@app/shared/shared-main'
-import { RecommendationInfo } from './recommendation-info.model'
-
-export interface RecommendationService {
-  getRecommendations (recommendation: RecommendationInfo): Observable<Video[]>
-}
diff --git a/client/src/app/videos/recommendations/recommended-videos.component.html b/client/src/app/videos/recommendations/recommended-videos.component.html
deleted file mode 100644
index 0467cabf5..000000000
--- a/client/src/app/videos/recommendations/recommended-videos.component.html
+++ /dev/null
@@ -1,24 +0,0 @@
-<div class="other-videos">
-  <ng-container *ngIf="hasVideos$ | async">
-    <div class="title-page-container">
-      <h2 i18n class="title-page title-page-single">
-        Other videos
-      </h2>
-      <div *ngIf="!playlist" class="title-page-autoplay"
-        [ngbTooltip]="autoPlayNextVideoTooltip" placement="bottom-right auto"
-      >
-        <span i18n>AUTOPLAY</span>
-        <p-inputSwitch class="small" [(ngModel)]="autoPlayNextVideo" (ngModelChange)="switchAutoPlayNextVideo()"></p-inputSwitch>
-      </div>
-    </div>
-
-    <ng-container *ngFor="let video of (videos$ | async); let i = index; let length = count">
-      <my-video-miniature
-        [displayOptions]="displayOptions" [video]="video" [user]="userMiniature"
-        (videoBlocked)="onVideoRemoved()" (videoRemoved)="onVideoRemoved()">
-      </my-video-miniature>
-
-      <hr *ngIf="!playlist && i == 0 && length > 1" />
-    </ng-container>
-  </ng-container>
-</div>
diff --git a/client/src/app/videos/recommendations/recommended-videos.component.scss b/client/src/app/videos/recommendations/recommended-videos.component.scss
deleted file mode 100644
index b278c9654..000000000
--- a/client/src/app/videos/recommendations/recommended-videos.component.scss
+++ /dev/null
@@ -1,31 +0,0 @@
-.title-page-container {
-  display: flex;
-  justify-content: space-between;
-  align-items: baseline;
-  margin-bottom: 25px;
-  flex-wrap: wrap-reverse;
-
-  .title-page.active, .title-page.title-page-single {
-    margin-bottom: unset;
-    margin-right: .5rem !important;
-  }
-}
-
-.title-page-autoplay {
-  display: flex;
-  width: max-content;
-  height: max-content;
-  align-items: center;
-  margin-left: auto;
-
-  span {
-    margin-right: 0.3rem;
-    text-transform: uppercase;
-    font-size: 85%;
-    font-weight: 600;
-  }
-}
-
-hr {
-  margin-top: 0;
-}
diff --git a/client/src/app/videos/recommendations/recommended-videos.component.ts b/client/src/app/videos/recommendations/recommended-videos.component.ts
deleted file mode 100644
index 016975341..000000000
--- a/client/src/app/videos/recommendations/recommended-videos.component.ts
+++ /dev/null
@@ -1,91 +0,0 @@
-import { Observable } from 'rxjs'
-import { Component, EventEmitter, Input, OnChanges, OnInit, Output } from '@angular/core'
-import { AuthService, Notifier, SessionStorageService, User, UserService } from '@app/core'
-import { Video } from '@app/shared/shared-main'
-import { MiniatureDisplayOptions } from '@app/shared/shared-video-miniature'
-import { VideoPlaylist } from '@app/shared/shared-video-playlist'
-import { I18n } from '@ngx-translate/i18n-polyfill'
-import { RecommendationInfo } from './recommendation-info.model'
-import { RecommendedVideosStore } from './recommended-videos.store'
-
-@Component({
-  selector: 'my-recommended-videos',
-  templateUrl: './recommended-videos.component.html',
-  styleUrls: [ './recommended-videos.component.scss' ]
-})
-export class RecommendedVideosComponent implements OnInit, OnChanges {
-  @Input() inputRecommendation: RecommendationInfo
-  @Input() playlist: VideoPlaylist
-  @Output() gotRecommendations = new EventEmitter<Video[]>()
-
-  autoPlayNextVideo: boolean
-  autoPlayNextVideoTooltip: string
-
-  displayOptions: MiniatureDisplayOptions = {
-    date: true,
-    views: true,
-    by: true,
-    avatar: true
-  }
-
-  userMiniature: User
-
-  readonly hasVideos$: Observable<boolean>
-  readonly videos$: Observable<Video[]>
-
-  constructor (
-    private userService: UserService,
-    private authService: AuthService,
-    private notifier: Notifier,
-    private i18n: I18n,
-    private store: RecommendedVideosStore,
-    private sessionStorageService: SessionStorageService
-  ) {
-    this.videos$ = this.store.recommendations$
-    this.hasVideos$ = this.store.hasRecommendations$
-    this.videos$.subscribe(videos => this.gotRecommendations.emit(videos))
-
-    if (this.authService.isLoggedIn()) {
-      this.autoPlayNextVideo = this.authService.getUser().autoPlayNextVideo
-    } else {
-      this.autoPlayNextVideo = this.sessionStorageService.getItem(User.KEYS.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO) === 'true' || false
-      this.sessionStorageService.watch([User.KEYS.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO]).subscribe(
-        () => this.autoPlayNextVideo = this.sessionStorageService.getItem(User.KEYS.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO) === 'true'
-      )
-    }
-
-    this.autoPlayNextVideoTooltip = this.i18n('When active, the next video is automatically played after the current one.')
-  }
-
-  ngOnInit () {
-    this.userService.getAnonymousOrLoggedUser()
-      .subscribe(user => this.userMiniature = user)
-  }
-
-  ngOnChanges () {
-    if (this.inputRecommendation) {
-      this.store.requestNewRecommendations(this.inputRecommendation)
-    }
-  }
-
-  onVideoRemoved () {
-    this.store.requestNewRecommendations(this.inputRecommendation)
-  }
-
-  switchAutoPlayNextVideo () {
-    this.sessionStorageService.setItem(User.KEYS.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO, this.autoPlayNextVideo.toString())
-
-    if (this.authService.isLoggedIn()) {
-      const details = {
-        autoPlayNextVideo: this.autoPlayNextVideo
-      }
-
-      this.userService.updateMyProfile(details).subscribe(
-        () => {
-          this.authService.refreshUserInformation()
-        },
-        err => this.notifier.error(err.message)
-      )
-    }
-  }
-}
diff --git a/client/src/app/videos/recommendations/recommended-videos.store.ts b/client/src/app/videos/recommendations/recommended-videos.store.ts
deleted file mode 100644
index 8c3fb6480..000000000
--- a/client/src/app/videos/recommendations/recommended-videos.store.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import { Observable, ReplaySubject } from 'rxjs'
-import { map, shareReplay, switchMap, take } from 'rxjs/operators'
-import { Inject, Injectable } from '@angular/core'
-import { Video } from '@app/shared/shared-main'
-import { RecentVideosRecommendationService } from './recent-videos-recommendation.service'
-import { RecommendationInfo } from './recommendation-info.model'
-import { RecommendationService } from './recommendations.service'
-
-/**
- * This store is intended to provide data for the RecommendedVideosComponent.
- */
-@Injectable()
-export class RecommendedVideosStore {
-  public readonly recommendations$: Observable<Video[]>
-  public readonly hasRecommendations$: Observable<boolean>
-  private readonly requestsForLoad$$ = new ReplaySubject<RecommendationInfo>(1)
-
-  constructor (
-    @Inject(RecentVideosRecommendationService) private recommendations: RecommendationService
-  ) {
-    this.recommendations$ = this.requestsForLoad$$.pipe(
-      switchMap(requestedRecommendation => {
-        return this.recommendations.getRecommendations(requestedRecommendation)
-                              .pipe(take(1))
-      }),
-      shareReplay()
-    )
-
-    this.hasRecommendations$ = this.recommendations$.pipe(
-      map(otherVideos => otherVideos.length > 0)
-    )
-  }
-
-  requestNewRecommendations (recommend: RecommendationInfo) {
-    this.requestsForLoad$$.next(recommend)
-  }
-}
diff --git a/client/src/app/videos/video-list/index.ts b/client/src/app/videos/video-list/index.ts
deleted file mode 100644
index af1bd58b7..000000000
--- a/client/src/app/videos/video-list/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export * from './overview'
-export * from './video-local.component'
-export * from './video-recently-added.component'
-export * from './video-trending.component'
-export * from './video-most-liked.component'
diff --git a/client/src/app/videos/video-list/overview/index.ts b/client/src/app/videos/video-list/overview/index.ts
deleted file mode 100644
index e6cfa4802..000000000
--- a/client/src/app/videos/video-list/overview/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from './overview.service'
-export * from './video-overview.component'
-export * from './videos-overview.model'
diff --git a/client/src/app/videos/video-list/overview/overview.service.ts b/client/src/app/videos/video-list/overview/overview.service.ts
deleted file mode 100644
index 4458454d5..000000000
--- a/client/src/app/videos/video-list/overview/overview.service.ts
+++ /dev/null
@@ -1,78 +0,0 @@
-import { forkJoin, Observable, of } from 'rxjs'
-import { catchError, map, switchMap, tap } from 'rxjs/operators'
-import { HttpClient, HttpParams } from '@angular/common/http'
-import { Injectable } from '@angular/core'
-import { RestExtractor, ServerService } from '@app/core'
-import { immutableAssign } from '@app/helpers'
-import { VideoService } from '@app/shared/shared-main'
-import { peertubeTranslate, VideosOverview as VideosOverviewServer } from '@shared/models'
-import { environment } from '../../../../environments/environment'
-import { VideosOverview } from './videos-overview.model'
-
-@Injectable()
-export class OverviewService {
-  static BASE_OVERVIEW_URL = environment.apiUrl + '/api/v1/overviews/'
-
-  constructor (
-    private authHttp: HttpClient,
-    private restExtractor: RestExtractor,
-    private videosService: VideoService,
-    private serverService: ServerService
-  ) {}
-
-  getVideosOverview (page: number): Observable<VideosOverview> {
-    let params = new HttpParams()
-    params = params.append('page', page + '')
-
-    return this.authHttp
-               .get<VideosOverviewServer>(OverviewService.BASE_OVERVIEW_URL + 'videos', { params })
-               .pipe(
-                 switchMap(serverVideosOverview => this.updateVideosOverview(serverVideosOverview)),
-                 catchError(err => this.restExtractor.handleError(err))
-               )
-  }
-
-  private updateVideosOverview (serverVideosOverview: VideosOverviewServer): Observable<VideosOverview> {
-    const observables: Observable<any>[] = []
-    const videosOverviewResult: VideosOverview = {
-      tags: [],
-      categories: [],
-      channels: []
-    }
-
-    // Build videos objects
-    for (const key of Object.keys(serverVideosOverview)) {
-      for (const object of serverVideosOverview[ key ]) {
-        observables.push(
-          of(object.videos)
-            .pipe(
-              switchMap(videos => this.videosService.extractVideos({ total: 0, data: videos })),
-              map(result => result.data),
-              tap(videos => {
-                videosOverviewResult[key].push(immutableAssign(object, { videos }))
-              })
-            )
-        )
-      }
-    }
-
-    if (observables.length === 0) return of(videosOverviewResult)
-
-    return forkJoin(observables)
-      .pipe(
-        // Translate categories
-        switchMap(() => {
-          return this.serverService.getServerLocale()
-              .pipe(
-                tap(translations => {
-                  for (const c of videosOverviewResult.categories) {
-                    c.category.label = peertubeTranslate(c.category.label, translations)
-                  }
-                })
-              )
-        }),
-        map(() => videosOverviewResult)
-      )
-  }
-
-}
diff --git a/client/src/app/videos/video-list/overview/video-overview.component.html b/client/src/app/videos/video-list/overview/video-overview.component.html
deleted file mode 100644
index ca986c634..000000000
--- a/client/src/app/videos/video-list/overview/video-overview.component.html
+++ /dev/null
@@ -1,52 +0,0 @@
-<h1 class="sr-only" i18n>Discover</h1>
-<div class="margin-content">
-
-  <div class="no-results" i18n *ngIf="notResults">No results.</div>
-
-  <div
-    myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [autoInit]="true" [dataObservable]="onDataSubject.asObservable()"
-  >
-    <ng-container *ngFor="let overview of overviews">
-
-      <div class="section videos" *ngFor="let object of overview.categories">
-        <h1 class="section-title">
-          <a routerLink="/search" [queryParams]="{ categoryOneOf: [ object.category.id ] }">{{ object.category.label }}</a>
-        </h1>
-
-        <div class="video-wrapper" *ngFor="let video of buildVideos(object.videos)">
-          <my-video-miniature [video]="video" [fitWidth]="true" [user]="userMiniature" [displayVideoActions]="true">
-          </my-video-miniature>
-        </div>
-      </div>
-
-      <div class="section videos" *ngFor="let object of overview.tags">
-        <h2 class="section-title">
-          <a routerLink="/search" [queryParams]="{ tagsOneOf: [ object.tag ] }">#{{ object.tag }}</a>
-        </h2>
-
-        <div class="video-wrapper" *ngFor="let video of buildVideos(object.videos)">
-          <my-video-miniature [video]="video" [fitWidth]="true" [user]="userMiniature" [displayVideoActions]="true">
-          </my-video-miniature>
-        </div>
-      </div>
-
-      <div class="section channel videos" *ngFor="let object of overview.channels">
-        <div class="section-title">
-          <a [routerLink]="[ '/video-channels', buildVideoChannelBy(object) ]">
-            <img [src]="buildVideoChannelAvatarUrl(object)" alt="Avatar" />
-
-            <h2 class="section-title">{{ object.channel.displayName }}</h2>
-          </a>
-        </div>
-
-        <div class="video-wrapper" *ngFor="let video of buildVideos(object.videos)">
-          <my-video-miniature [video]="video" [fitWidth]="true" [user]="userMiniature" [displayVideoActions]="true">
-          </my-video-miniature>
-        </div>
-      </div>
-
-    </ng-container>
-
-  </div>
-
-</div>
diff --git a/client/src/app/videos/video-list/overview/video-overview.component.scss b/client/src/app/videos/video-list/overview/video-overview.component.scss
deleted file mode 100644
index c1d10188a..000000000
--- a/client/src/app/videos/video-list/overview/video-overview.component.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-@import '_variables';
-@import '_mixins';
-@import '_miniature';
-
-.section-title {
-  // make the element span a full grid row within .videos grid
-  grid-column: 1 / -1;
-}
-
-.margin-content {
-  @include fluid-videos-miniature-layout;
-}
-
-.section {
-  @include miniature-rows;
-}
diff --git a/client/src/app/videos/video-list/overview/video-overview.component.ts b/client/src/app/videos/video-list/overview/video-overview.component.ts
deleted file mode 100644
index b3be1d7b5..000000000
--- a/client/src/app/videos/video-list/overview/video-overview.component.ts
+++ /dev/null
@@ -1,94 +0,0 @@
-import { Subject } from 'rxjs'
-import { Component, OnInit } from '@angular/core'
-import { Notifier, ScreenService, User, UserService } from '@app/core'
-import { Video } from '@app/shared/shared-main'
-import { OverviewService } from './overview.service'
-import { VideosOverview } from './videos-overview.model'
-
-@Component({
-  selector: 'my-video-overview',
-  templateUrl: './video-overview.component.html',
-  styleUrls: [ './video-overview.component.scss' ]
-})
-export class VideoOverviewComponent implements OnInit {
-  onDataSubject = new Subject<any>()
-
-  overviews: VideosOverview[] = []
-  notResults = false
-
-  userMiniature: User
-
-  private loaded = false
-  private currentPage = 1
-  private maxPage = 20
-  private lastWasEmpty = false
-  private isLoading = false
-
-  constructor (
-    private notifier: Notifier,
-    private userService: UserService,
-    private overviewService: OverviewService,
-    private screenService: ScreenService
-  ) { }
-
-  ngOnInit () {
-    this.loadMoreResults()
-
-    this.userService.getAnonymousOrLoggedUser()
-      .subscribe(user => this.userMiniature = user)
-
-    this.userService.listenAnonymousUpdate()
-      .subscribe(user => this.userMiniature = user)
-  }
-
-  buildVideoChannelBy (object: { videos: Video[] }) {
-    return object.videos[0].byVideoChannel
-  }
-
-  buildVideoChannelAvatarUrl (object: { videos: Video[] }) {
-    return object.videos[0].videoChannelAvatarUrl
-  }
-
-  buildVideos (videos: Video[]) {
-    const numberOfVideos = this.screenService.getNumberOfAvailableMiniatures()
-
-    return videos.slice(0, numberOfVideos * 2)
-  }
-
-  onNearOfBottom () {
-    if (this.currentPage >= this.maxPage) return
-    if (this.lastWasEmpty) return
-    if (this.isLoading) return
-
-    this.currentPage++
-    this.loadMoreResults()
-  }
-
-  private loadMoreResults () {
-    this.isLoading = true
-
-    this.overviewService.getVideosOverview(this.currentPage)
-        .subscribe(
-          overview => {
-            this.isLoading = false
-
-            if (overview.tags.length === 0 && overview.channels.length === 0 && overview.categories.length === 0) {
-              this.lastWasEmpty = true
-              if (this.loaded === false) this.notResults = true
-
-              return
-            }
-
-            this.loaded = true
-            this.onDataSubject.next(overview)
-
-            this.overviews.push(overview)
-          },
-
-          err => {
-            this.notifier.error(err.message)
-            this.isLoading = false
-          }
-        )
-  }
-}
diff --git a/client/src/app/videos/video-list/overview/videos-overview.model.ts b/client/src/app/videos/video-list/overview/videos-overview.model.ts
deleted file mode 100644
index 6765ad9b7..000000000
--- a/client/src/app/videos/video-list/overview/videos-overview.model.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { Video } from '@app/shared/shared-main'
-import { VideoChannelSummary, VideoConstant, VideosOverview as VideosOverviewServer } from '@shared/models'
-
-export class VideosOverview implements VideosOverviewServer {
-  channels: {
-    channel: VideoChannelSummary
-    videos: Video[]
-  }[]
-
-  categories: {
-    category: VideoConstant<number>
-    videos: Video[]
-  }[]
-
-  tags: {
-    tag: string
-    videos: Video[]
-  }[]
-  [key: string]: any
-}
diff --git a/client/src/app/videos/video-list/video-local.component.ts b/client/src/app/videos/video-list/video-local.component.ts
deleted file mode 100644
index b4c71ac49..000000000
--- a/client/src/app/videos/video-list/video-local.component.ts
+++ /dev/null
@@ -1,86 +0,0 @@
-import { Component, OnDestroy, OnInit } from '@angular/core'
-import { ActivatedRoute, Router } from '@angular/router'
-import { AuthService, LocalStorageService, Notifier, ScreenService, ServerService, UserService } from '@app/core'
-import { HooksService } from '@app/core/plugins/hooks.service'
-import { immutableAssign } from '@app/helpers'
-import { VideoService } from '@app/shared/shared-main'
-import { AbstractVideoList } from '@app/shared/shared-video-miniature'
-import { I18n } from '@ngx-translate/i18n-polyfill'
-import { UserRight, VideoFilter, VideoSortField } from '@shared/models'
-
-@Component({
-  selector: 'my-videos-local',
-  styleUrls: [ '../../shared/shared-video-miniature/abstract-video-list.scss' ],
-  templateUrl: '../../shared/shared-video-miniature/abstract-video-list.html'
-})
-export class VideoLocalComponent extends AbstractVideoList implements OnInit, OnDestroy {
-  titlePage: string
-  sort = '-publishedAt' as VideoSortField
-  filter: VideoFilter = 'local'
-
-  useUserVideoPreferences = true
-
-  constructor (
-    protected i18n: I18n,
-    protected router: Router,
-    protected serverService: ServerService,
-    protected route: ActivatedRoute,
-    protected notifier: Notifier,
-    protected authService: AuthService,
-    protected userService: UserService,
-    protected screenService: ScreenService,
-    protected storageService: LocalStorageService,
-    private videoService: VideoService,
-    private hooks: HooksService
-  ) {
-    super()
-
-    this.titlePage = i18n('Local videos')
-  }
-
-  ngOnInit () {
-    super.ngOnInit()
-
-    if (this.authService.isLoggedIn()) {
-      const user = this.authService.getUser()
-      this.displayModerationBlock = user.hasRight(UserRight.SEE_ALL_VIDEOS)
-    }
-
-    this.generateSyndicationList()
-  }
-
-  ngOnDestroy () {
-    super.ngOnDestroy()
-  }
-
-  getVideosObservable (page: number) {
-    const newPagination = immutableAssign(this.pagination, { currentPage: page })
-    const params = {
-      videoPagination: newPagination,
-      sort: this.sort,
-      filter: this.filter,
-      categoryOneOf: this.categoryOneOf,
-      languageOneOf: this.languageOneOf,
-      nsfwPolicy: this.nsfwPolicy,
-      skipCount: true
-    }
-
-    return this.hooks.wrapObsFun(
-      this.videoService.getVideos.bind(this.videoService),
-      params,
-      'common',
-      'filter:api.local-videos.videos.list.params',
-      'filter:api.local-videos.videos.list.result'
-    )
-  }
-
-  generateSyndicationList () {
-    this.syndicationItems = this.videoService.getVideoFeedUrls(this.sort, this.filter, this.categoryOneOf)
-  }
-
-  toggleModerationDisplay () {
-    this.filter = this.filter === 'local' ? 'all-local' as 'all-local' : 'local' as 'local'
-
-    this.reloadVideos()
-  }
-}
diff --git a/client/src/app/videos/video-list/video-most-liked.component.ts b/client/src/app/videos/video-list/video-most-liked.component.ts
deleted file mode 100644
index ca14851bb..000000000
--- a/client/src/app/videos/video-list/video-most-liked.component.ts
+++ /dev/null
@@ -1,70 +0,0 @@
-import { Component, OnInit } from '@angular/core'
-import { ActivatedRoute, Router } from '@angular/router'
-import { AuthService, LocalStorageService, Notifier, ScreenService, ServerService, UserService } from '@app/core'
-import { HooksService } from '@app/core/plugins/hooks.service'
-import { immutableAssign } from '@app/helpers'
-import { VideoService } from '@app/shared/shared-main'
-import { AbstractVideoList } from '@app/shared/shared-video-miniature'
-import { I18n } from '@ngx-translate/i18n-polyfill'
-import { VideoSortField } from '@shared/models'
-
-@Component({
-  selector: 'my-videos-most-liked',
-  styleUrls: [ '../../shared/shared-video-miniature/abstract-video-list.scss' ],
-  templateUrl: '../../shared/shared-video-miniature/abstract-video-list.html'
-})
-export class VideoMostLikedComponent extends AbstractVideoList implements OnInit {
-  titlePage: string
-  defaultSort: VideoSortField = '-likes'
-
-  useUserVideoPreferences = true
-
-  constructor (
-    protected i18n: I18n,
-    protected router: Router,
-    protected serverService: ServerService,
-    protected route: ActivatedRoute,
-    protected notifier: Notifier,
-    protected authService: AuthService,
-    protected userService: UserService,
-    protected screenService: ScreenService,
-    protected storageService: LocalStorageService,
-    private videoService: VideoService,
-    private hooks: HooksService
-  ) {
-    super()
-  }
-
-  ngOnInit () {
-    super.ngOnInit()
-
-    this.generateSyndicationList()
-
-    this.titlePage = this.i18n('Most liked videos')
-    this.titleTooltip = this.i18n('Videos that have the higher number of likes.')
-  }
-
-  getVideosObservable (page: number) {
-    const newPagination = immutableAssign(this.pagination, { currentPage: page })
-    const params = {
-      videoPagination: newPagination,
-      sort: this.sort,
-      categoryOneOf: this.categoryOneOf,
-      languageOneOf: this.languageOneOf,
-      nsfwPolicy: this.nsfwPolicy,
-      skipCount: true
-    }
-
-    return this.hooks.wrapObsFun(
-      this.videoService.getVideos.bind(this.videoService),
-      params,
-      'common',
-      'filter:api.most-liked-videos.videos.list.params',
-      'filter:api.most-liked-videos.videos.list.result'
-    )
-  }
-
-  generateSyndicationList () {
-    this.syndicationItems = this.videoService.getVideoFeedUrls(this.sort, undefined, this.categoryOneOf)
-  }
-}
diff --git a/client/src/app/videos/video-list/video-recently-added.component.ts b/client/src/app/videos/video-list/video-recently-added.component.ts
deleted file mode 100644
index c9395133f..000000000
--- a/client/src/app/videos/video-list/video-recently-added.component.ts
+++ /dev/null
@@ -1,74 +0,0 @@
-import { Component, OnDestroy, OnInit } from '@angular/core'
-import { ActivatedRoute, Router } from '@angular/router'
-import { AuthService, LocalStorageService, Notifier, ScreenService, ServerService, UserService } from '@app/core'
-import { HooksService } from '@app/core/plugins/hooks.service'
-import { immutableAssign } from '@app/helpers'
-import { VideoService } from '@app/shared/shared-main'
-import { AbstractVideoList } from '@app/shared/shared-video-miniature'
-import { I18n } from '@ngx-translate/i18n-polyfill'
-import { VideoSortField } from '@shared/models'
-
-@Component({
-  selector: 'my-videos-recently-added',
-  styleUrls: [ '../../shared/shared-video-miniature/abstract-video-list.scss' ],
-  templateUrl: '../../shared/shared-video-miniature/abstract-video-list.html'
-})
-export class VideoRecentlyAddedComponent extends AbstractVideoList implements OnInit, OnDestroy {
-  titlePage: string
-  sort: VideoSortField = '-publishedAt'
-  groupByDate = true
-
-  useUserVideoPreferences = true
-
-  constructor (
-    protected i18n: I18n,
-    protected route: ActivatedRoute,
-    protected serverService: ServerService,
-    protected router: Router,
-    protected notifier: Notifier,
-    protected authService: AuthService,
-    protected userService: UserService,
-    protected screenService: ScreenService,
-    protected storageService: LocalStorageService,
-    private videoService: VideoService,
-    private hooks: HooksService
-  ) {
-    super()
-
-    this.titlePage = i18n('Recently added')
-  }
-
-  ngOnInit () {
-    super.ngOnInit()
-
-    this.generateSyndicationList()
-  }
-
-  ngOnDestroy () {
-    super.ngOnDestroy()
-  }
-
-  getVideosObservable (page: number) {
-    const newPagination = immutableAssign(this.pagination, { currentPage: page })
-    const params = {
-      videoPagination: newPagination,
-      sort: this.sort,
-      categoryOneOf: this.categoryOneOf,
-      languageOneOf: this.languageOneOf,
-      nsfwPolicy: this.nsfwPolicy,
-      skipCount: true
-    }
-
-    return this.hooks.wrapObsFun(
-      this.videoService.getVideos.bind(this.videoService),
-      params,
-      'common',
-      'filter:api.recently-added-videos.videos.list.params',
-      'filter:api.recently-added-videos.videos.list.result'
-    )
-  }
-
-  generateSyndicationList () {
-    this.syndicationItems = this.videoService.getVideoFeedUrls(this.sort, undefined, this.categoryOneOf)
-  }
-}
diff --git a/client/src/app/videos/video-list/video-trending.component.ts b/client/src/app/videos/video-list/video-trending.component.ts
deleted file mode 100644
index 10eab18de..000000000
--- a/client/src/app/videos/video-list/video-trending.component.ts
+++ /dev/null
@@ -1,87 +0,0 @@
-import { Component, OnDestroy, OnInit } from '@angular/core'
-import { ActivatedRoute, Router } from '@angular/router'
-import { AuthService, LocalStorageService, Notifier, ScreenService, ServerService, UserService } from '@app/core'
-import { HooksService } from '@app/core/plugins/hooks.service'
-import { immutableAssign } from '@app/helpers'
-import { VideoService } from '@app/shared/shared-main'
-import { AbstractVideoList } from '@app/shared/shared-video-miniature'
-import { I18n } from '@ngx-translate/i18n-polyfill'
-import { VideoSortField } from '@shared/models'
-
-@Component({
-  selector: 'my-videos-trending',
-  styleUrls: [ '../../shared/shared-video-miniature/abstract-video-list.scss' ],
-  templateUrl: '../../shared/shared-video-miniature/abstract-video-list.html'
-})
-export class VideoTrendingComponent extends AbstractVideoList implements OnInit, OnDestroy {
-  titlePage: string
-  defaultSort: VideoSortField = '-trending'
-
-  useUserVideoPreferences = true
-
-  constructor (
-    protected i18n: I18n,
-    protected router: Router,
-    protected serverService: ServerService,
-    protected route: ActivatedRoute,
-    protected notifier: Notifier,
-    protected authService: AuthService,
-    protected userService: UserService,
-    protected screenService: ScreenService,
-    protected storageService: LocalStorageService,
-    private videoService: VideoService,
-    private hooks: HooksService
-  ) {
-    super()
-  }
-
-  ngOnInit () {
-    super.ngOnInit()
-
-    this.generateSyndicationList()
-
-    this.serverService.getConfig().subscribe(
-      config => {
-        const trendingDays = config.trending.videos.intervalDays
-
-        if (trendingDays === 1) {
-          this.titlePage = this.i18n('Trending for the last 24 hours')
-          this.titleTooltip = this.i18n('Trending videos are those totalizing the greatest number of views during the last 24 hours')
-        } else {
-          this.titlePage = this.i18n('Trending for the last {{days}} days', { days: trendingDays })
-          this.titleTooltip = this.i18n(
-            'Trending videos are those totalizing the greatest number of views during the last {{days}} days',
-            { days: trendingDays }
-          )
-        }
-      })
-  }
-
-  ngOnDestroy () {
-    super.ngOnDestroy()
-  }
-
-  getVideosObservable (page: number) {
-    const newPagination = immutableAssign(this.pagination, { currentPage: page })
-    const params = {
-      videoPagination: newPagination,
-      sort: this.sort,
-      categoryOneOf: this.categoryOneOf,
-      languageOneOf: this.languageOneOf,
-      nsfwPolicy: this.nsfwPolicy,
-      skipCount: true
-    }
-
-    return this.hooks.wrapObsFun(
-      this.videoService.getVideos.bind(this.videoService),
-      params,
-      'common',
-      'filter:api.trending-videos.videos.list.params',
-      'filter:api.trending-videos.videos.list.result'
-    )
-  }
-
-  generateSyndicationList () {
-    this.syndicationItems = this.videoService.getVideoFeedUrls(this.sort, undefined, this.categoryOneOf)
-  }
-}
diff --git a/client/src/app/videos/video-list/video-user-subscriptions.component.ts b/client/src/app/videos/video-list/video-user-subscriptions.component.ts
deleted file mode 100644
index 41ad9b277..000000000
--- a/client/src/app/videos/video-list/video-user-subscriptions.component.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-import { Component, OnDestroy, OnInit } from '@angular/core'
-import { ActivatedRoute, Router } from '@angular/router'
-import { AuthService, LocalStorageService, Notifier, ScreenService, ServerService, UserService } from '@app/core'
-import { HooksService } from '@app/core/plugins/hooks.service'
-import { immutableAssign } from '@app/helpers'
-import { VideoService } from '@app/shared/shared-main'
-import { UserSubscriptionService } from '@app/shared/shared-user-subscription'
-import { AbstractVideoList, OwnerDisplayType } from '@app/shared/shared-video-miniature'
-import { I18n } from '@ngx-translate/i18n-polyfill'
-import { VideoSortField } from '@shared/models'
-
-@Component({
-  selector: 'my-videos-user-subscriptions',
-  styleUrls: [ '../../shared/shared-video-miniature/abstract-video-list.scss' ],
-  templateUrl: '../../shared/shared-video-miniature/abstract-video-list.html'
-})
-export class VideoUserSubscriptionsComponent extends AbstractVideoList implements OnInit, OnDestroy {
-  titlePage: string
-  sort = '-publishedAt' as VideoSortField
-  ownerDisplayType: OwnerDisplayType = 'auto'
-  groupByDate = true
-
-  constructor (
-    protected i18n: I18n,
-    protected router: Router,
-    protected serverService: ServerService,
-    protected route: ActivatedRoute,
-    protected notifier: Notifier,
-    protected authService: AuthService,
-    protected userService: UserService,
-    protected screenService: ScreenService,
-    protected storageService: LocalStorageService,
-    private userSubscription: UserSubscriptionService,
-    private videoService: VideoService,
-    private hooks: HooksService
-  ) {
-    super()
-
-    this.titlePage = i18n('Videos from your subscriptions')
-    this.actions.push({
-      routerLink: '/my-account/subscriptions',
-      label: i18n('Subscriptions'),
-      iconName: 'cog'
-    })
-  }
-
-  ngOnInit () {
-    super.ngOnInit()
-  }
-
-  ngOnDestroy () {
-    super.ngOnDestroy()
-  }
-
-  getVideosObservable (page: number) {
-    const newPagination = immutableAssign(this.pagination, { currentPage: page })
-    const params = {
-      videoPagination: newPagination,
-      sort: this.sort,
-      skipCount: true
-    }
-
-    return this.hooks.wrapObsFun(
-      this.userSubscription.getUserSubscriptionVideos.bind(this.userSubscription),
-      params,
-      'common',
-      'filter:api.user-subscriptions-videos.videos.list.params',
-      'filter:api.user-subscriptions-videos.videos.list.result'
-    )
-  }
-
-  generateSyndicationList () {
-    // not implemented yet
-  }
-}
diff --git a/client/src/app/videos/videos-routing.module.ts b/client/src/app/videos/videos-routing.module.ts
deleted file mode 100644
index 16b65be63..000000000
--- a/client/src/app/videos/videos-routing.module.ts
+++ /dev/null
@@ -1,125 +0,0 @@
-import { NgModule } from '@angular/core'
-import { RouterModule, Routes } from '@angular/router'
-import { VideoLocalComponent } from '@app/videos/video-list/video-local.component'
-import { MetaGuard } from '@ngx-meta/core'
-import { VideoRecentlyAddedComponent } from './video-list/video-recently-added.component'
-import { VideoTrendingComponent } from './video-list/video-trending.component'
-import { VideoMostLikedComponent } from './video-list/video-most-liked.component'
-import { VideosComponent } from './videos.component'
-import { VideoUserSubscriptionsComponent } from './video-list/video-user-subscriptions.component'
-import { VideoOverviewComponent } from './video-list/overview/video-overview.component'
-
-const videosRoutes: Routes = [
-  {
-    path: 'videos',
-    component: VideosComponent,
-    canActivateChild: [ MetaGuard ],
-    children: [
-      {
-        path: 'overview',
-        component: VideoOverviewComponent,
-        data: {
-          meta: {
-            title: 'Discover videos'
-          }
-        }
-      },
-      {
-        path: 'trending',
-        component: VideoTrendingComponent,
-        data: {
-          meta: {
-            title: 'Trending videos'
-          },
-          reuse: {
-            enabled: true,
-            key: 'trending-videos-list'
-          }
-        }
-      },
-      {
-        path: 'most-liked',
-        component: VideoMostLikedComponent,
-        data: {
-          meta: {
-            title: 'Most liked videos'
-          },
-          reuse: {
-            enabled: true,
-            key: 'most-liked-videos-list'
-          }
-        }
-      },
-      {
-        path: 'recently-added',
-        component: VideoRecentlyAddedComponent,
-        data: {
-          meta: {
-            title: 'Recently added videos'
-          },
-          reuse: {
-            enabled: true,
-            key: 'recently-added-videos-list'
-          }
-        }
-      },
-      {
-        path: 'subscriptions',
-        component: VideoUserSubscriptionsComponent,
-        data: {
-          meta: {
-            title: 'Subscriptions'
-          },
-          reuse: {
-            enabled: true,
-            key: 'subscription-videos-list'
-          }
-        }
-      },
-      {
-        path: 'local',
-        component: VideoLocalComponent,
-        data: {
-          meta: {
-            title: 'Local videos'
-          },
-          reuse: {
-            enabled: true,
-            key: 'local-videos-list'
-          }
-        }
-      },
-      {
-        path: 'upload',
-        loadChildren: () => import('@app/videos/+video-edit/video-add.module').then(m => m.VideoAddModule),
-        data: {
-          meta: {
-            title: 'Upload a video'
-          }
-        }
-      },
-      {
-        path: 'update/:uuid',
-        loadChildren: () => import('@app/videos/+video-edit/video-update.module').then(m => m.VideoUpdateModule),
-        data: {
-          meta: {
-            title: 'Edit a video'
-          }
-        }
-      },
-      {
-        path: 'watch',
-        loadChildren: () => import('@app/videos/+video-watch/video-watch.module').then(m => m.VideoWatchModule),
-        data: {
-          preload: 3000
-        }
-      }
-    ]
-  }
-]
-
-@NgModule({
-  imports: [ RouterModule.forChild(videosRoutes) ],
-  exports: [ RouterModule ]
-})
-export class VideosRoutingModule {}
diff --git a/client/src/app/videos/videos.component.ts b/client/src/app/videos/videos.component.ts
deleted file mode 100644
index 585a3ad9a..000000000
--- a/client/src/app/videos/videos.component.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { Component } from '@angular/core'
-
-@Component({
-  template: '<router-outlet></router-outlet>'
-})
-export class VideosComponent {}
diff --git a/client/src/app/videos/videos.module.ts b/client/src/app/videos/videos.module.ts
deleted file mode 100644
index 217e5bb50..000000000
--- a/client/src/app/videos/videos.module.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import { NgModule } from '@angular/core'
-import { SharedFormModule } from '@app/shared/shared-forms'
-import { SharedGlobalIconModule } from '@app/shared/shared-icons'
-import { SharedMainModule } from '@app/shared/shared-main'
-import { SharedUserSubscriptionModule } from '@app/shared/shared-user-subscription'
-import { SharedVideoMiniatureModule } from '@app/shared/shared-video-miniature'
-import { VideoOverviewComponent } from './video-list/overview/video-overview.component'
-import { VideoLocalComponent } from './video-list/video-local.component'
-import { VideoMostLikedComponent } from './video-list/video-most-liked.component'
-import { VideoRecentlyAddedComponent } from './video-list/video-recently-added.component'
-import { VideoTrendingComponent } from './video-list/video-trending.component'
-import { VideoUserSubscriptionsComponent } from './video-list/video-user-subscriptions.component'
-import { VideosRoutingModule } from './videos-routing.module'
-import { VideosComponent } from './videos.component'
-
-@NgModule({
-  imports: [
-    VideosRoutingModule,
-
-    SharedMainModule,
-    SharedFormModule,
-    SharedVideoMiniatureModule,
-    SharedUserSubscriptionModule,
-    SharedGlobalIconModule
-  ],
-
-  declarations: [
-    VideosComponent,
-
-    VideoTrendingComponent,
-    VideoMostLikedComponent,
-    VideoRecentlyAddedComponent,
-    VideoLocalComponent,
-    VideoUserSubscriptionsComponent,
-    VideoOverviewComponent
-  ],
-
-  exports: [
-    VideosComponent
-  ],
-
-  providers: []
-})
-export class VideosModule { }
-- 
cgit v1.2.3