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

---
 .../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 --
 28 files changed, 3883 deletions(-)
 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

(limited to 'client/src/app/videos/+video-watch')

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 { }
-- 
cgit v1.2.3