Reorganize watch components

10 files changed, 1360 insertions, 0 deletions

diff --git a/client/src/app/+videos/+video-watch/shared/comment/index.ts b/client/src/app/+videos/+video-watch/shared/comment/index.ts
new file mode 100644
index 000000000..2f2c69893
--- /dev/null
+++ b/client/src/app/+videos/+video-watch/shared/comment/index.ts
@@ -0,0 +1,3 @@
+export * from './video-comment-add.component'
+export * from './video-comment.component'
+export * from './video-comments.component'
diff --git a/client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.html b/client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.html
new file mode 100644
index 000000000..3ee818c8b
--- /dev/null
+++ b/client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.html
@@ -0,0 +1,96 @@
+<form novalidate [formGroup]="form" (ngSubmit)="formValidated()">
+  <div class="avatar-and-textarea">
+    <my-actor-avatar [account]="user?.account" size="25"></my-actor-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>
+
+      <my-help
+        [ngClass]="{ 'is-rtl': isRTL() }" class="markdown-guide" helpType="custom" iconName="markdown"
+        tooltipPlacement="left auto" autoClose="true" i18n-title title="Markdown compatible"
+      >
+        <ng-template ptTemplate="customHtml">
+          <span i18n>Markdown compatible that supports:</span>
+
+          <ul>
+            <li><span i18n>Auto generated links</span></li>
+            <li><span i18n>Break lines</span></li>
+            <li><span i18n>Lists</span></li>
+            <li>
+              <span i18n>Emphasis</span>
+              <code>**<strong i18n>bold</strong>** _<i i18n>italic</i>_</code>
+            </li>
+            <li>
+              <span i18n>Emoji shortcuts</span>
+              <code>:) &lt;3</code>
+            </li>
+            <li>
+              <span i18n>Emoji markup</span>
+              <code>:smile:</code>
+              <div><a href="" (click)="openEmojiModal($event)" i18n>See complete list</a></div>
+            </li>
+          </ul>
+        </ng-template>
+      </my-help>
+      <div *ngIf="formErrors.text" class="form-error">
+        {{ formErrors.text }}
+      </div>
+    </div>
+  </div>
+
+  <div class="comment-buttons">
+    <button *ngIf="isAddButtonDisplayed()" class="peertube-button tertiary-button cancel-button" (click)="cancelCommentReply()" type="button" i18n>
+      Cancel
+    </button>
+
+    <button *ngIf="isAddButtonDisplayed()" class="peertube-button orange-button" [ngClass]="{ disabled: !form.valid || addingComment }">
+      {{ addingCommentButtonValue }}
+    </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)="hideModals()"></my-global-icon>
+  </div>
+
+  <div class="modal-body">
+    <span i18n>
+      You can comment using an account on any ActivityPub-compatible instance (PeerTube/Mastodon/Pleroma account for example).
+    </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="peertube-button grey-button"
+      (click)="hideModals()" (key.enter)="hideModals()"
+    >
+
+    <input
+      type="submit" i18n-value value="Login to comment" class="peertube-button orange-button"
+      (click)="gotoLogin()"
+    >
+  </div>
+</ng-template>
+
+<ng-template #emojiModal>
+  <div class="modal-header">
+    <h4 class="modal-title" id="modal-basic-title" i18n>Markdown Emoji List</h4>
+    <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hideModals()"></my-global-icon>
+  </div>
+  <div class="modal-body">
+    <div class="emoji-flex">
+      <div class="emoji-flex-item" *ngFor="let emojiMarkup of emojiMarkupList">
+        {{ emojiMarkup[0] }} <code>:{{ emojiMarkup[1] }}:</code>
+      </div>
+    </div>
+  </div>
+</ng-template>
diff --git a/client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.scss b/client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.scss
new file mode 100644
index 000000000..fb79991db
--- /dev/null
+++ b/client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.scss
@@ -0,0 +1,119 @@
+@use '_variables' as *;
+@use '_mixins' as *;
+
+$markdown-icon-height: 18px;
+$markdown-icon-width: 30px;
+$peertube-textarea-height: 60px;
+
+form {
+  margin-bottom: 30px;
+}
+
+.avatar-and-textarea {
+  display: flex;
+  margin-bottom: 10px;
+
+  my-actor-avatar {
+    @include margin-right(10px);
+  }
+
+  .form-group {
+    flex-grow: 1;
+    margin: 0;
+    position: relative;
+  }
+
+  textarea {
+    @include peertube-textarea(100%, $peertube-textarea-height);
+    @include button-focus(pvar(--mainColorLightest));
+    @include padding-right($markdown-icon-width + 15px !important);
+
+    min-height: calc(#{$peertube-textarea-height} - 15px * 2);
+
+    @media screen and (max-width: 600px) {
+      @include padding-right($markdown-icon-width + 19px !important);
+    }
+
+    &:focus::placeholder {
+      opacity: 0;
+    }
+  }
+}
+
+.markdown-guide {
+  position: absolute;
+  top: 5px;
+  right: 9px;
+
+  // inset-inline is not well supported by web browsers
+  &.is-rtl {
+    right: unset;
+    left: 9px;
+  }
+
+  ::ng-deep .help-tooltip-button {
+    my-global-icon {
+      height: $markdown-icon-height;
+      width: $markdown-icon-width;
+
+      svg {
+        color: #C6C6C6;
+        fill: #C6C6C6;
+        border-radius: 3px;
+      }
+    }
+
+    &:focus,
+    &:active,
+    &:hover {
+      my-global-icon svg {
+        background-color: #C6C6C6;
+        color: pvar(--mainBackgroundColor);
+        fill: pvar(--mainBackgroundColor);
+      }
+    }
+  }
+}
+
+.comment-buttons {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.emoji-flex {
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center;
+
+  .emoji-flex-item {
+    text-align: left;
+    margin: auto;
+    min-width: 227px;
+    flex: 1;
+
+    code {
+      @include margin-left(5px);
+
+      display: inline-block;
+      vertical-align: middle;
+    }
+  }
+}
+
+@media screen and (max-width: 600px) {
+  textarea,
+  .comment-buttons button {
+    font-size: 14px !important;
+  }
+
+  textarea {
+    padding: 5px !important;
+  }
+}
+
+.modal-body {
+  > span {
+    float: left;
+    margin-bottom: 20px;
+  }
+}
diff --git a/client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.ts b/client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.ts
new file mode 100644
index 000000000..78efe1684
--- /dev/null
+++ b/client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.ts
@@ -0,0 +1,220 @@
+import { Observable } from 'rxjs'
+import { getLocaleDirection } from '@angular/common'
+import {
+  Component,
+  ElementRef,
+  EventEmitter,
+  Inject,
+  Input,
+  LOCALE_ID,
+  OnChanges,
+  OnInit,
+  Output,
+  SimpleChanges,
+  ViewChild
+} from '@angular/core'
+import { Router } from '@angular/router'
+import { Notifier, User } from '@app/core'
+import { VIDEO_COMMENT_TEXT_VALIDATOR } from '@app/shared/form-validators/video-comment-validators'
+import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
+import { Video } from '@app/shared/shared-main'
+import { VideoComment, VideoCommentService } from '@app/shared/shared-video-comment'
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { VideoCommentCreate } from '@shared/models'
+
+@Component({
+  selector: 'my-video-comment-add',
+  templateUrl: './video-comment-add.component.html',
+  styleUrls: ['./video-comment-add.component.scss']
+})
+export class VideoCommentAddComponent extends FormReactive implements OnChanges, OnInit {
+  @Input() user: User
+  @Input() video: Video
+  @Input() parentComment?: VideoComment
+  @Input() parentComments?: VideoComment[]
+  @Input() focusOnInit = false
+  @Input() textValue?: string
+
+  @Output() commentCreated = new EventEmitter<VideoComment>()
+  @Output() cancel = new EventEmitter()
+
+  @ViewChild('visitorModal', { static: true }) visitorModal: NgbModal
+  @ViewChild('emojiModal', { static: true }) emojiModal: NgbModal
+  @ViewChild('textarea', { static: true }) textareaElement: ElementRef
+
+  addingComment = false
+  addingCommentButtonValue: string
+
+  constructor (
+    protected formValidatorService: FormValidatorService,
+    private notifier: Notifier,
+    private videoCommentService: VideoCommentService,
+    private modalService: NgbModal,
+    private router: Router,
+    @Inject(LOCALE_ID) private localeId: string
+  ) {
+    super()
+  }
+
+  get emojiMarkupList () {
+    const emojiMarkupObjectList = require('markdown-it-emoji/lib/data/light.json')
+
+    // Populate emoji-markup-list from object to array to avoid keys alphabetical order
+    const emojiMarkupArrayList = []
+    for (const emojiMarkupName in emojiMarkupObjectList) {
+      if (emojiMarkupName) {
+        const emoji = emojiMarkupObjectList[emojiMarkupName]
+        emojiMarkupArrayList.push([emoji, emojiMarkupName])
+      }
+    }
+
+    return emojiMarkupArrayList
+  }
+
+  ngOnInit () {
+    this.buildForm({
+      text: VIDEO_COMMENT_TEXT_VALIDATOR
+    })
+
+    if (this.user) {
+      if (!this.parentComment) {
+        this.addingCommentButtonValue = $localize`Comment`
+      } else {
+        this.addingCommentButtonValue = $localize`Reply`
+      }
+
+      this.initTextValue()
+    }
+  }
+
+  ngOnChanges (changes: SimpleChanges) {
+    // Not initialized yet
+    if (!this.form) return
+
+    if (changes.textValue && changes.textValue.currentValue && changes.textValue.currentValue !== changes.textValue.previousValue) {
+      this.patchTextValue(changes.textValue.currentValue, true)
+    }
+  }
+
+  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)
+    }
+  }
+
+  openEmojiModal (event: any) {
+    event.preventDefault()
+    this.modalService.open(this.emojiModal, { backdrop: true, size: 'lg' })
+  }
+
+  hideModals () {
+    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
+  }
+
+  gotoLogin () {
+    this.hideModals()
+    this.router.navigate([ '/login' ])
+  }
+
+  cancelCommentReply () {
+    this.cancel.emit(null)
+    this.form.value['text'] = this.textareaElement.nativeElement.value = ''
+  }
+
+  isRTL () {
+    return getLocaleDirection(this.localeId) === 'rtl'
+  }
+
+  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)
+  }
+
+  private initTextValue () {
+    if (this.textValue) {
+      this.patchTextValue(this.textValue, this.focusOnInit)
+      return
+    }
+
+    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.patchTextValue(mentionsText, this.focusOnInit)
+    }
+  }
+
+  private patchTextValue (text: string, focus: boolean) {
+    setTimeout(() => {
+      if (focus) {
+        this.textareaElement.nativeElement.focus()
+      }
+
+      // Scroll to textarea
+      this.textareaElement.nativeElement.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'nearest' })
+
+      // Use the native textarea autosize according to the text's break lines
+      this.textareaElement.nativeElement.dispatchEvent(new Event('input'))
+    })
+
+    this.form.patchValue({ text })
+  }
+}
diff --git a/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.html b/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.html
new file mode 100644
index 000000000..d8b944b35
--- /dev/null
+++ b/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.html
@@ -0,0 +1,94 @@
+<div *ngIf="isCommentDisplayed()" class="root-comment" [ngClass]="{ 'is-child': isChild() }">
+  <div class="left">
+    <my-actor-avatar *ngIf="!comment.isDeleted" [href]="comment.account.url" [account]="comment.account"></my-actor-avatar>
+    <div class="vertical-border"></div>
+  </div>
+
+  <div class="right" [ngClass]="{ 'mb-3': firstInThread }">
+    <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]="[ '/a', comment.by ]">
+              <span class="comment-account-name" [ngClass]="{ 'video-author': video.account.id === comment.account.id }">
+                {{ comment.account.displayName }}
+              </span>
+
+              <span class="comment-account-fid ml-1">{{ comment.by }}</span>
+            </a>
+          </div>
+
+          <a [routerLink]="['/w', video.shortUUID, { '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 tabindex=0 (click)="onWantToReply()" class="comment-action-reply" i18n>Reply</div>
+
+          <my-user-moderation-dropdown
+            [prependActions]="prependModerationActions" tabindex=0 [buttonStyled]="false"
+            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]="['/w', video.shortUUID, { 'threadId': comment.threadId }]"
+             class="comment-date">{{ comment.createdAt | myFromNow }}</a>
+        </div>
+
+        <div class="comment-html comment-html-deleted">
+          <i i18n>This comment has been deleted</i>
+        </div>
+      </ng-container>
+
+      <my-video-comment-add
+        *ngIf="!comment.isDeleted && inReplyToCommentId === comment.id"
+        [user]="user"
+        [video]="video"
+        [parentComment]="comment"
+        [parentComments]="newParentComments"
+        [focusOnInit]="true"
+        (commentCreated)="onCommentReplyCreated($event)"
+        (cancel)="onResetReply()"
+        [textValue]="redraftValue"
+      ></my-video-comment-add>
+
+      <div *ngIf="commentTree">
+        <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)"
+            (wantedToRedraft)="onWantToRedraft($event)"
+            (resetReply)="onResetReply()"
+            (timestampClicked)="handleTimestampClicked($event)"
+            [redraftValue]="redraftValue"
+          ></my-video-comment>
+        </div>
+      </div>
+
+      <ng-content></ng-content>
+    </div>
+  </div>
+</div>
+
+<ng-container *ngIf="prependModerationActions">
+  <my-comment-report #commentReportModal [comment]="comment"></my-comment-report>
+</ng-container>
diff --git a/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.scss b/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.scss
new file mode 100644
index 000000000..87e313d41
--- /dev/null
+++ b/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.scss
@@ -0,0 +1,199 @@
+@use '_variables' as *;
+@use '_mixins' as *;
+
+.root-comment {
+  font-size: 15px;
+  display: flex;
+
+  .left {
+    @include margin-right(10px);
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    .vertical-border {
+      width: 2px;
+      height: 100%;
+      background-color: rgba(0, 0, 0, 0.05);
+      margin: 10px calc(1rem + 1px);
+    }
+  }
+
+  .right {
+    width: 100%;
+  }
+}
+
+my-actor-avatar {
+  @include actor-avatar-size(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 {
+  @include padding-right(6px);
+  @include padding-left(6px);
+
+  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;
+  color: #fff !important;
+}
+
+.comment-account {
+  word-break: break-all;
+  font-weight: 600;
+  font-size: 90%;
+
+  a {
+    @include disable-default-a-behaviour;
+
+    color: pvar(--mainForegroundColor);
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  .comment-account-fid {
+    opacity: .6;
+  }
+}
+
+.comment-date {
+  @include margin-left(5px);
+
+  font-size: 90%;
+  color: pvar(--greyForegroundColor);
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.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 {
+    @include margin-right(10px);
+
+    color: pvar(--greyForegroundColor);
+    cursor: pointer;
+
+    &:hover,
+    &:active,
+    &:focus,
+    &:focus-visible {
+      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;
+  }
+}
+
+.is-child {
+  // Reduce avatars size for replies
+  my-actor-avatar {
+    @include actor-avatar-size(25px);
+  }
+
+  .left {
+    @include margin-right(6px);
+  }
+}
+
+@media screen and (max-width: 1200px) {
+  .children {
+    @include margin-left(-10px);
+  }
+}
+
+@media screen and (max-width: 600px) {
+  .children {
+    @include margin-left(-20px);
+
+    .left {
+      align-items: flex-start;
+
+      .vertical-border {
+        @include margin-left(2px);
+      }
+    }
+  }
+
+  .comment-account-date {
+    flex-direction: column;
+
+    .comment-date {
+      @include margin-left(0);
+    }
+  }
+}
diff --git a/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.ts b/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.ts
new file mode 100644
index 000000000..04f8f0d58
--- /dev/null
+++ b/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.ts
@@ -0,0 +1,208 @@
+
+import { Component, EventEmitter, Input, OnChanges, OnInit, Output, ViewChild } from '@angular/core'
+import { MarkdownService, Notifier, UserService } from '@app/core'
+import { AuthService } from '@app/core/auth'
+import { Account, DropdownAction, Video } from '@app/shared/shared-main'
+import { CommentReportComponent } from '@app/shared/shared-moderation/report-modals/comment-report.component'
+import { VideoComment, VideoCommentThreadTree } from '@app/shared/shared-video-comment'
+import { User, UserRight } from '@shared/models'
+
+@Component({
+  selector: 'my-video-comment',
+  templateUrl: './video-comment.component.html',
+  styleUrls: ['./video-comment.component.scss']
+})
+export class VideoCommentComponent implements OnInit, OnChanges {
+  @ViewChild('commentReportModal') commentReportModal: CommentReportComponent
+
+  @Input() video: Video
+  @Input() comment: VideoComment
+  @Input() parentComments: VideoComment[] = []
+  @Input() commentTree: VideoCommentThreadTree
+  @Input() inReplyToCommentId: number
+  @Input() highlightedComment = false
+  @Input() firstInThread = false
+  @Input() redraftValue?: string
+
+  @Output() wantedToReply = new EventEmitter<VideoComment>()
+  @Output() wantedToDelete = new EventEmitter<VideoComment>()
+  @Output() wantedToRedraft = new EventEmitter<VideoComment>()
+  @Output() threadCreated = new EventEmitter<VideoCommentThreadTree>()
+  @Output() resetReply = new EventEmitter()
+  @Output() timestampClicked = new EventEmitter<number>()
+
+  prependModerationActions: DropdownAction<any>[]
+
+  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,
+        hasDisplayedChildren: false,
+        children: []
+      }
+
+      this.threadCreated.emit(this.commentTree)
+    }
+
+    this.commentTree.children.unshift({
+      comment: createdComment,
+      hasDisplayedChildren: false,
+      children: []
+    })
+
+    this.resetReply.emit()
+
+    this.redraftValue = undefined
+  }
+
+  onWantToReply (comment?: VideoComment) {
+    this.wantedToReply.emit(comment || this.comment)
+  }
+
+  onWantToDelete (comment?: VideoComment) {
+    this.wantedToDelete.emit(comment || this.comment)
+  }
+
+  onWantToRedraft (comment?: VideoComment) {
+    this.wantedToRedraft.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)
+      )
+  }
+
+  isRedraftableByUser () {
+    return (
+      this.comment.account &&
+      this.isUserLoggedIn() &&
+      this.user.account.id === this.comment.account.id &&
+      this.comment.totalReplies === 0
+    )
+  }
+
+  isReportableByUser () {
+    return (
+      this.comment.account &&
+      this.isUserLoggedIn() &&
+      this.comment.isDeleted === false &&
+      this.user.account.id !== this.comment.account.id
+    )
+  }
+
+  isCommentDisplayed () {
+    // Not deleted
+    return !this.comment.isDeleted ||
+      this.comment.totalReplies !== 0 || // Or root comment thread has replies
+      (this.commentTree?.hasDisplayedChildren) // Or this is a reply that have other replies
+  }
+
+  isChild () {
+    return this.parentComments.length !== 0
+  }
+
+  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 () {
+    // Before HTML rendering restore line feed for markdown list compatibility
+    const commentText = this.comment.text.replace(/<br.?\/?>/g, '\r\n')
+    const html = await this.markdownService.textMarkdownToHTML(commentText, true, true)
+    this.sanitizedCommentHTML = 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
+    }
+
+    this.prependModerationActions = []
+
+    if (this.isReportableByUser()) {
+      this.prependModerationActions.push({
+        label: $localize`Report this comment`,
+        iconName: 'flag',
+        handler: () => this.showReportModal()
+      })
+    }
+
+    if (this.isRemovableByUser()) {
+      this.prependModerationActions.push({
+        label: $localize`Remove`,
+        iconName: 'delete',
+        handler: () => this.onWantToDelete()
+      })
+    }
+
+    if (this.isRedraftableByUser()) {
+      this.prependModerationActions.push({
+        label: $localize`Remove & re-draft`,
+        iconName: 'edit',
+        handler: () => this.onWantToRedraft()
+      })
+    }
+
+    if (this.prependModerationActions.length === 0) {
+      this.prependModerationActions = undefined
+    }
+  }
+
+  private showReportModal () {
+    this.commentReportModal.show()
+  }
+}
diff --git a/client/src/app/+videos/+video-watch/shared/comment/video-comments.component.html b/client/src/app/+videos/+video-watch/shared/comment/video-comments.component.html
new file mode 100644
index 000000000..9e6fde2e0
--- /dev/null
+++ b/client/src/app/+videos/+video-watch/shared/comment/video-comments.component.html
@@ -0,0 +1,100 @@
+<div>
+  <div class="title-block">
+    <h2 class="title-page title-page-single">
+      {totalNotDeletedComments, plural, =0 {Comments} =1 {1 Comment} other {{{totalNotDeletedComments}} Comments}}
+    </h2>
+
+    <my-feed [syndicationItems]="syndicationItems"></my-feed>
+
+    <div ngbDropdown class="d-inline-block ml-4 dropdown-root">
+      <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)"
+      [textValue]="commentThreadRedraftValue"
+    ></my-video-comment-add>
+
+    <div *ngIf="totalNotDeletedComments === 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)"
+          (wantedToRedraft)="onWantedToRedraft($event)"
+          (threadCreated)="onThreadCreated($event)"
+          (resetReply)="onResetReply()"
+          (timestampClicked)="handleTimestampClicked($event)"
+          [redraftValue]="commentReplyRedraftValue"
+        ></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)"
+          (wantedToRedraft)="onWantedToRedraft($event)"
+          (threadCreated)="onThreadCreated($event)"
+          (resetReply)="onResetReply()"
+          (timestampClicked)="handleTimestampClicked($event)"
+          [redraftValue]="commentReplyRedraftValue"
+        >
+          <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, plural, =1 {1 reply} other {{{ comment.totalReplies }} replies}} from {{ video?.account?.displayName || 'the author' }} and others
+              </ng-container>
+              <ng-template i18n #onlyAuthorComments>
+                View {comment.totalReplies, plural, =1 {1 reply} other {{{ comment.totalReplies }} replies}} from {{ video?.account?.displayName || 'the author' }}
+              </ng-template>
+            </ng-template>
+
+            <ng-template i18n #noAuthorComments>View {comment.totalReplies, plural, =1 {1 reply} other {{{ 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/shared/comment/video-comments.component.scss b/client/src/app/+videos/+video-watch/shared/comment/video-comments.component.scss
new file mode 100644
index 000000000..31aa73937
--- /dev/null
+++ b/client/src/app/+videos/+video-watch/shared/comment/video-comments.component.scss
@@ -0,0 +1,60 @@
+@use '_variables' as *;
+@use '_mixins' as *;
+
+#highlighted-comment {
+  margin-bottom: 25px;
+}
+
+.view-replies {
+  font-weight: $font-semibold;
+  font-size: 15px;
+  cursor: pointer;
+}
+
+.glyphicon,
+.comment-thread-loading {
+  @include margin-right(5px);
+
+  display: inline-block;
+  font-size: 13px;
+}
+
+.title-block {
+  .title-page {
+    @include margin-right(0);
+  }
+
+  my-feed {
+    @include margin-left(5px);
+
+    display: inline-block;
+    opacity: 0;
+    transition: ease-in .2s opacity;
+    width: 12px;
+    position: relative;
+    top: -3px;
+  }
+
+  &:hover my-feed {
+    opacity: 1;
+  }
+}
+
+#dropdown-sort-comments {
+  font-weight: 600;
+  text-transform: uppercase;
+  border: 0;
+  transform: translateY(-7%);
+}
+
+@media screen and (max-width: 600px) {
+  .view-replies {
+    @include margin-left(46px);
+  }
+}
+
+@media screen and (max-width: 450px) {
+  .view-replies {
+    font-size: 14px;
+  }
+}
diff --git a/client/src/app/+videos/+video-watch/shared/comment/video-comments.component.ts b/client/src/app/+videos/+video-watch/shared/comment/video-comments.component.ts
new file mode 100644
index 000000000..2c39e63fb
--- /dev/null
+++ b/client/src/app/+videos/+video-watch/shared/comment/video-comments.component.ts
@@ -0,0 +1,261 @@
+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 { VideoComment, VideoCommentService, VideoCommentThreadTree } from '@app/shared/shared-video-comment'
+
+@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
+  }
+  totalNotDeletedComments: number
+
+  inReplyToCommentId: number
+  commentReplyRedraftValue: string
+  commentThreadRedraftValue: string
+
+  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 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.totalNotDeletedComments = res.totalNotDeletedComments
+
+        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)
+    this.commentThreadRedraftValue = undefined
+  }
+
+  onWantedToReply (comment: VideoComment) {
+    this.inReplyToCommentId = comment.id
+  }
+
+  onResetReply () {
+    this.inReplyToCommentId = undefined
+    this.commentReplyRedraftValue = 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,
+    title = $localize`Delete`,
+    message = $localize`Do you really want to delete this comment?`
+  ): Promise<boolean> {
+    if (commentToDelete.isLocal || this.video.isLocal) {
+      message += $localize` The deletion will be sent to remote instances so they can reflect the change.`
+    } else {
+      message += $localize` It is a remote comment, so the deletion will only be effective on your instance.`
+    }
+
+    const res = await this.confirmService.confirm(message, title)
+    if (res === false) return false
+
+    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)
+      )
+
+    return true
+  }
+
+  async onWantedToRedraft (commentToRedraft: VideoComment) {
+    const confirm = await this.onWantedToDelete(commentToRedraft, $localize`Delete and re-draft`, $localize`Do you really want to delete and re-draft this comment?`)
+
+    if (confirm) {
+      this.inReplyToCommentId = commentToRedraft.inReplyToCommentId
+
+      // Restore line feed for editing
+      const commentToRedraftText = commentToRedraft.text.replace(/<br.?\/?>/g, '\r\n')
+
+      if (commentToRedraft.threadId === commentToRedraft.id) {
+        this.commentThreadRedraftValue = commentToRedraftText
+      } else {
+        this.commentReplyRedraftValue = commentToRedraftText
+      }
+
+    }
+  }
+
+  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.totalNotDeletedComments = null
+
+      this.syndicationItems = this.videoCommentService.getVideoCommentsFeeds(this.video)
+      this.loadMoreThreads()
+    }
+  }
+
+  private processHighlightedThread (highlightedThreadId: number) {
+    this.highlightedThread = this.comments.find(c => c.id === highlightedThreadId)
+
+    const highlightThread = true
+    this.viewReplies(highlightedThreadId, highlightThread)
+  }
+}