24 files changed, 852 insertions, 296 deletions

diff --git a/client/src/app/shared/shared-forms/form-validators/video-abuse-validators.service.ts b/client/src/app/shared/shared-forms/form-validators/abuse-validators.service.ts
index aae56d607..739115e19 100644
--- a/client/src/app/shared/shared-forms/form-validators/video-abuse-validators.service.ts
+++ b/client/src/app/shared/shared-forms/form-validators/abuse-validators.service.ts
@@ -4,12 +4,12 @@ import { Injectable } from '@angular/core'
 import { BuildFormValidator } from './form-validator.service'
 
 @Injectable()
-export class VideoAbuseValidatorsService {
-  readonly VIDEO_ABUSE_REASON: BuildFormValidator
-  readonly VIDEO_ABUSE_MODERATION_COMMENT: BuildFormValidator
+export class AbuseValidatorsService {
+  readonly ABUSE_REASON: BuildFormValidator
+  readonly ABUSE_MODERATION_COMMENT: BuildFormValidator
 
   constructor (private i18n: I18n) {
-    this.VIDEO_ABUSE_REASON = {
+    this.ABUSE_REASON = {
       VALIDATORS: [ Validators.required, Validators.minLength(2), Validators.maxLength(3000) ],
       MESSAGES: {
         'required': this.i18n('Report reason is required.'),
@@ -18,7 +18,7 @@ export class VideoAbuseValidatorsService {
       }
     }
 
-    this.VIDEO_ABUSE_MODERATION_COMMENT = {
+    this.ABUSE_MODERATION_COMMENT = {
       VALIDATORS: [ Validators.required, Validators.minLength(2), Validators.maxLength(3000) ],
       MESSAGES: {
         'required': this.i18n('Moderation comment is required.'),
diff --git a/client/src/app/shared/shared-forms/form-validators/index.ts b/client/src/app/shared/shared-forms/form-validators/index.ts
index 8b71841a9..b06a326ff 100644
--- a/client/src/app/shared/shared-forms/form-validators/index.ts
+++ b/client/src/app/shared/shared-forms/form-validators/index.ts
@@ -1,3 +1,4 @@
+export * from './abuse-validators.service'
 export * from './batch-domains-validators.service'
 export * from './custom-config-validators.service'
 export * from './form-validator.service'
@@ -6,7 +7,6 @@ export * from './instance-validators.service'
 export * from './login-validators.service'
 export * from './reset-password-validators.service'
 export * from './user-validators.service'
-export * from './video-abuse-validators.service'
 export * from './video-accept-ownership-validators.service'
 export * from './video-block-validators.service'
 export * from './video-captions-validators.service'
diff --git a/client/src/app/shared/shared-forms/shared-form.module.ts b/client/src/app/shared/shared-forms/shared-form.module.ts
index e82fa97d4..ba33704cf 100644
--- a/client/src/app/shared/shared-forms/shared-form.module.ts
+++ b/client/src/app/shared/shared-forms/shared-form.module.ts
@@ -11,7 +11,7 @@ import {
   LoginValidatorsService,
   ResetPasswordValidatorsService,
   UserValidatorsService,
-  VideoAbuseValidatorsService,
+  AbuseValidatorsService,
   VideoAcceptOwnershipValidatorsService,
   VideoBlockValidatorsService,
   VideoCaptionsValidatorsService,
@@ -69,7 +69,7 @@ import { TimestampInputComponent } from './timestamp-input.component'
     LoginValidatorsService,
     ResetPasswordValidatorsService,
     UserValidatorsService,
-    VideoAbuseValidatorsService,
+    AbuseValidatorsService,
     VideoAcceptOwnershipValidatorsService,
     VideoBlockValidatorsService,
     VideoCaptionsValidatorsService,
diff --git a/client/src/app/shared/shared-main/account/actor.model.ts b/client/src/app/shared/shared-main/account/actor.model.ts
index 5fc7989dd..bda88bdee 100644
--- a/client/src/app/shared/shared-main/account/actor.model.ts
+++ b/client/src/app/shared/shared-main/account/actor.model.ts
@@ -14,7 +14,9 @@ export abstract class Actor implements ActorServer {
 
   avatarUrl: string
 
-  static GET_ACTOR_AVATAR_URL (actor: { avatar?: Avatar }) {
+  isLocal: boolean
+
+  static GET_ACTOR_AVATAR_URL (actor: { avatar?: { url?: string, path: string } }) {
     if (actor?.avatar?.url) return actor.avatar.url
 
     if (actor && actor.avatar) {
@@ -46,10 +48,16 @@ export abstract class Actor implements ActorServer {
     this.host = hash.host
     this.followingCount = hash.followingCount
     this.followersCount = hash.followersCount
-    this.createdAt = new Date(hash.createdAt.toString())
-    this.updatedAt = new Date(hash.updatedAt.toString())
+
+    if (hash.createdAt) this.createdAt = new Date(hash.createdAt.toString())
+    if (hash.updatedAt) this.updatedAt = new Date(hash.updatedAt.toString())
+
     this.avatar = hash.avatar
 
+    const absoluteAPIUrl = getAbsoluteAPIUrl()
+    const thisHost = new URL(absoluteAPIUrl).host
+    this.isLocal = this.host.trim() === thisHost
+
     this.updateComputedAttributes()
   }
 
diff --git a/client/src/app/shared/shared-main/users/user-notification.model.ts b/client/src/app/shared/shared-main/users/user-notification.model.ts
index de25d3ab9..61b48a806 100644
--- a/client/src/app/shared/shared-main/users/user-notification.model.ts
+++ b/client/src/app/shared/shared-main/users/user-notification.model.ts
@@ -25,9 +25,22 @@ export class UserNotification implements UserNotificationServer {
     video: VideoInfo
   }
 
-  videoAbuse?: {
+  abuse?: {
     id: number
-    video: VideoInfo
+
+    video?: VideoInfo
+
+    comment?: {
+      threadId: number
+
+      video: {
+        id: number
+        uuid: string
+        name: string
+      }
+    }
+
+    account?: ActorInfo
   }
 
   videoBlacklist?: {
@@ -55,7 +68,7 @@ export class UserNotification implements UserNotificationServer {
   // Additional fields
   videoUrl?: string
   commentUrl?: any[]
-  videoAbuseUrl?: string
+  abuseUrl?: string
   videoAutoBlacklistUrl?: string
   accountUrl?: string
   videoImportIdentifier?: string
@@ -78,7 +91,7 @@ export class UserNotification implements UserNotificationServer {
       this.comment = hash.comment
       if (this.comment) this.setAvatarUrl(this.comment.account)
 
-      this.videoAbuse = hash.videoAbuse
+      this.abuse = hash.abuse
 
       this.videoBlacklist = hash.videoBlacklist
 
@@ -104,12 +117,15 @@ export class UserNotification implements UserNotificationServer {
         case UserNotificationType.COMMENT_MENTION:
           if (!this.comment) break
           this.accountUrl = this.buildAccountUrl(this.comment.account)
-          this.commentUrl = [ this.buildVideoUrl(this.comment.video), { threadId: this.comment.threadId } ]
+          this.commentUrl = this.buildCommentUrl(this.comment)
           break
 
-        case UserNotificationType.NEW_VIDEO_ABUSE_FOR_MODERATORS:
-          this.videoAbuseUrl = '/admin/moderation/video-abuses/list'
-          this.videoUrl = this.buildVideoUrl(this.videoAbuse.video)
+        case UserNotificationType.NEW_ABUSE_FOR_MODERATORS:
+          this.abuseUrl = '/admin/moderation/abuses/list'
+
+          if (this.abuse.video) this.videoUrl = this.buildVideoUrl(this.abuse.video)
+          else if (this.abuse.comment) this.commentUrl = this.buildCommentUrl(this.abuse.comment)
+          else if (this.abuse.account) this.accountUrl = this.buildAccountUrl(this.abuse.account)
           break
 
         case UserNotificationType.VIDEO_AUTO_BLACKLIST_FOR_MODERATORS:
@@ -178,7 +194,11 @@ export class UserNotification implements UserNotificationServer {
     return videoImport.targetUrl || videoImport.magnetUri || videoImport.torrentName
   }
 
-  private setAvatarUrl (actor: { avatarUrl?: string, avatar?: Avatar }) {
+  private buildCommentUrl (comment: { video: { uuid: string }, threadId: number }) {
+    return [ this.buildVideoUrl(comment.video), { threadId: comment.threadId } ]
+  }
+
+  private setAvatarUrl (actor: { avatarUrl?: string, avatar?: { url?: string, path: string } }) {
     actor.avatarUrl = Actor.GET_ACTOR_AVATAR_URL(actor)
   }
 }
diff --git a/client/src/app/shared/shared-main/users/user-notifications.component.html b/client/src/app/shared/shared-main/users/user-notifications.component.html
index d5be1470e..8127ae979 100644
--- a/client/src/app/shared/shared-main/users/user-notifications.component.html
+++ b/client/src/app/shared/shared-main/users/user-notifications.component.html
@@ -19,7 +19,7 @@
 
         <ng-template #noVideo>
           <my-global-icon iconName="alert" aria-hidden="true"></my-global-icon>
-  
+
           <div class="message" i18n>
             The notification concerns a video now unavailable
           </div>
@@ -42,11 +42,24 @@
         </div>
       </ng-container>
 
-      <ng-container *ngSwitchCase="UserNotificationType.NEW_VIDEO_ABUSE_FOR_MODERATORS">
+      <ng-container *ngSwitchCase="UserNotificationType.NEW_ABUSE_FOR_MODERATORS">
         <my-global-icon iconName="flag" aria-hidden="true"></my-global-icon>
 
-        <div class="message" i18n>
-          <a (click)="markAsRead(notification)" [routerLink]="notification.videoAbuseUrl">A new video abuse</a> has been created on video <a (click)="markAsRead(notification)" [routerLink]="notification.videoUrl">{{ notification.videoAbuse.video.name }}</a>
+        <div class="message" *ngIf="notification.videoUrl" i18n>
+          <a (click)="markAsRead(notification)" [routerLink]="notification.abuseUrl">A new video abuse</a> has been created on video <a (click)="markAsRead(notification)" [routerLink]="notification.videoUrl">{{ notification.abuse.video.name }}</a>
+        </div>
+
+        <div class="message" *ngIf="notification.commentUrl" i18n>
+          <a (click)="markAsRead(notification)" [routerLink]="notification.abuseUrl">A new comment abuse</a> has been created on video <a (click)="markAsRead(notification)" [routerLink]="notification.commentUrl">{{ notification.abuse.comment.video.name }}</a>
+        </div>
+
+        <div class="message" *ngIf="notification.accountUrl" i18n>
+          <a (click)="markAsRead(notification)" [routerLink]="notification.abuseUrl">A new account abuse</a> has been created on account <a (click)="markAsRead(notification)" [routerLink]="notification.accountUrl">{{ notification.abuse.account.displayName }}</a>
+        </div>
+
+        <!-- Deleted entity associated to the abuse -->
+        <div class="message" *ngIf="!notification.videoUrl && !notification.commentUrl && !notification.accountUrl" i18n>
+          <a (click)="markAsRead(notification)" [routerLink]="notification.abuseUrl">A new abuse</a> has been created
         </div>
       </ng-container>
 
@@ -65,7 +78,7 @@
           <a (click)="markAsRead(notification)" [routerLink]="notification.accountUrl">
             <img alt="" aria-labelledby="avatar" class="avatar" [src]="notification.comment.account.avatarUrl" />
           </a>
-  
+
           <div class="message" i18n>
             <a (click)="markAsRead(notification)" [routerLink]="notification.accountUrl">{{ notification.comment.account.displayName }}</a> commented your video <a (click)="markAsRead(notification)" [routerLink]="notification.commentUrl">{{ notification.comment.video.name }}</a>
           </div>
@@ -73,7 +86,7 @@
 
         <ng-template #noComment>
           <my-global-icon iconName="alert" aria-hidden="true"></my-global-icon>
-  
+
           <div class="message" i18n>
             The notification concerns a comment now unavailable
           </div>
diff --git a/client/src/app/shared/shared-moderation/abuse.service.ts b/client/src/app/shared/shared-moderation/abuse.service.ts
new file mode 100644
index 000000000..95ac16955
--- /dev/null
+++ b/client/src/app/shared/shared-moderation/abuse.service.ts
@@ -0,0 +1,154 @@
+import { omit } from 'lodash-es'
+import { SortMeta } from 'primeng/api'
+import { Observable } from 'rxjs'
+import { catchError, map } from 'rxjs/operators'
+import { HttpClient, HttpParams } from '@angular/common/http'
+import { Injectable } from '@angular/core'
+import { RestExtractor, RestPagination, RestService } from '@app/core'
+import { Abuse, AbuseCreate, AbuseFilter, AbusePredefinedReasonsString, AbuseState, AbuseUpdate, ResultList } from '@shared/models'
+import { environment } from '../../../environments/environment'
+import { I18n } from '@ngx-translate/i18n-polyfill'
+
+@Injectable()
+export class AbuseService {
+  private static BASE_ABUSE_URL = environment.apiUrl + '/api/v1/abuses'
+
+  constructor (
+    private i18n: I18n,
+    private authHttp: HttpClient,
+    private restService: RestService,
+    private restExtractor: RestExtractor
+  ) { }
+
+  getAbuses (options: {
+    pagination: RestPagination,
+    sort: SortMeta,
+    search?: string
+  }): Observable<ResultList<Abuse>> {
+    const { pagination, sort, search } = options
+    const url = AbuseService.BASE_ABUSE_URL
+
+    let params = new HttpParams()
+    params = this.restService.addRestGetParams(params, pagination, sort)
+
+    if (search) {
+      const filters = this.restService.parseQueryStringFilter(search, {
+        id: { prefix: '#' },
+        state: {
+          prefix: 'state:',
+          handler: v => {
+            if (v === 'accepted') return AbuseState.ACCEPTED
+            if (v === 'pending') return AbuseState.PENDING
+            if (v === 'rejected') return AbuseState.REJECTED
+
+            return undefined
+          }
+        },
+        videoIs: {
+          prefix: 'videoIs:',
+          handler: v => {
+            if (v === 'deleted') return v
+            if (v === 'blacklisted') return v
+
+            return undefined
+          }
+        },
+        searchReporter: { prefix: 'reporter:' },
+        searchReportee: { prefix: 'reportee:' },
+        predefinedReason: { prefix: 'tag:' }
+      })
+
+      params = this.restService.addObjectParams(params, filters)
+    }
+
+    return this.authHttp.get<ResultList<Abuse>>(url, { params })
+      .pipe(
+        catchError(res => this.restExtractor.handleError(res))
+      )
+  }
+
+  reportVideo (parameters: AbuseCreate) {
+    const url = AbuseService.BASE_ABUSE_URL
+
+    const body = omit(parameters, ['id'])
+
+    return this.authHttp.post(url, body)
+      .pipe(
+        map(this.restExtractor.extractDataBool),
+        catchError(res => this.restExtractor.handleError(res))
+      )
+  }
+
+  updateAbuse (abuse: Abuse, abuseUpdate: AbuseUpdate) {
+    const url = AbuseService.BASE_ABUSE_URL + '/' + abuse.id
+
+    return this.authHttp.put(url, abuseUpdate)
+      .pipe(
+        map(this.restExtractor.extractDataBool),
+        catchError(res => this.restExtractor.handleError(res))
+      )
+  }
+
+  removeAbuse (abuse: Abuse) {
+    const url = AbuseService.BASE_ABUSE_URL + '/' + abuse.id
+
+    return this.authHttp.delete(url)
+      .pipe(
+        map(this.restExtractor.extractDataBool),
+        catchError(res => this.restExtractor.handleError(res))
+      )
+  }
+
+  getPrefefinedReasons (type: AbuseFilter) {
+    let reasons: { id: AbusePredefinedReasonsString, label: string, description?: string, help?: string }[] = [
+      {
+        id: 'violentOrRepulsive',
+        label: this.i18n('Violent or repulsive'),
+        help: this.i18n('Contains offensive, violent, or coarse language or iconography.')
+      },
+      {
+        id: 'hatefulOrAbusive',
+        label: this.i18n('Hateful or abusive'),
+        help: this.i18n('Contains abusive, racist or sexist language or iconography.')
+      },
+      {
+        id: 'spamOrMisleading',
+        label: this.i18n('Spam, ad or false news'),
+        help: this.i18n('Contains marketing, spam, purposefully deceitful news, or otherwise misleading thumbnail/text/tags. Please provide reputable sources to report hoaxes.')
+      },
+      {
+        id: 'privacy',
+        label: this.i18n('Privacy breach or doxxing'),
+        help: this.i18n('Contains personal information that could be used to track, identify, contact or impersonate someone (e.g. name, address, phone number, email, or credit card details).')
+      },
+      {
+        id: 'rights',
+        label: this.i18n('Intellectual property violation'),
+        help: this.i18n('Infringes my intellectual property or copyright, wrt. the regional rules with which the server must comply.')
+      },
+      {
+        id: 'serverRules',
+        label: this.i18n('Breaks server rules'),
+        description: this.i18n('Anything not included in the above that breaks the terms of service, code of conduct, or general rules in place on the server.')
+      }
+    ]
+
+    if (type === 'video') {
+      reasons = reasons.concat([
+        {
+          id: 'thumbnails',
+          label: this.i18n('Thumbnails'),
+          help: this.i18n('The above can only be seen in thumbnails.')
+        },
+        {
+          id: 'captions',
+          label: this.i18n('Captions'),
+          help: this.i18n('The above can only be seen in captions (please describe which).')
+        }
+      ])
+    }
+
+    return reasons
+  }
+
+}
diff --git a/client/src/app/shared/shared-moderation/index.ts b/client/src/app/shared/shared-moderation/index.ts
index 8e74254f6..41c910ffe 100644
--- a/client/src/app/shared/shared-moderation/index.ts
+++ b/client/src/app/shared/shared-moderation/index.ts
@@ -1,3 +1,6 @@
+export * from './report-modals'
+
+export * from './abuse.service'
 export * from './account-block.model'
 export * from './account-blocklist.component'
 export * from './batch-domains-modal.component'
@@ -6,8 +9,6 @@ export * from './bulk.service'
 export * from './server-blocklist.component'
 export * from './user-ban-modal.component'
 export * from './user-moderation-dropdown.component'
-export * from './video-abuse.service'
 export * from './video-block.component'
 export * from './video-block.service'
-export * from './video-report.component'
 export * from './shared-moderation.module'
diff --git a/client/src/app/shared/shared-moderation/report-modals/account-report.component.ts b/client/src/app/shared/shared-moderation/report-modals/account-report.component.ts
new file mode 100644
index 000000000..78ca934c7
--- /dev/null
+++ b/client/src/app/shared/shared-moderation/report-modals/account-report.component.ts
@@ -0,0 +1,94 @@
+import { mapValues, pickBy } from 'lodash-es'
+import { Component, Input, OnInit, ViewChild } from '@angular/core'
+import { Notifier } from '@app/core'
+import { AbuseValidatorsService, FormReactive, FormValidatorService } from '@app/shared/shared-forms'
+import { Account } from '@app/shared/shared-main'
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref'
+import { I18n } from '@ngx-translate/i18n-polyfill'
+import { abusePredefinedReasonsMap, AbusePredefinedReasonsString } from '@shared/models'
+import { AbuseService } from '../abuse.service'
+
+@Component({
+  selector: 'my-account-report',
+  templateUrl: './report.component.html',
+  styleUrls: [ './report.component.scss' ]
+})
+export class AccountReportComponent extends FormReactive implements OnInit {
+  @Input() account: Account = null
+
+  @ViewChild('modal', { static: true }) modal: NgbModal
+
+  error: string = null
+  predefinedReasons: { id: AbusePredefinedReasonsString, label: string, description?: string, help?: string }[] = []
+  modalTitle: string
+
+  private openedModal: NgbModalRef
+
+  constructor (
+    protected formValidatorService: FormValidatorService,
+    private modalService: NgbModal,
+    private abuseValidatorsService: AbuseValidatorsService,
+    private abuseService: AbuseService,
+    private notifier: Notifier,
+    private i18n: I18n
+  ) {
+    super()
+  }
+
+  get currentHost () {
+    return window.location.host
+  }
+
+  get originHost () {
+    if (this.isRemote()) {
+      return this.account.host
+    }
+
+    return ''
+  }
+
+  ngOnInit () {
+    this.modalTitle = this.i18n('Report {{displayName}}', { displayName: this.account.displayName })
+
+    this.buildForm({
+      reason: this.abuseValidatorsService.ABUSE_REASON,
+      predefinedReasons: mapValues(abusePredefinedReasonsMap, r => null)
+    })
+
+    this.predefinedReasons = this.abuseService.getPrefefinedReasons('account')
+  }
+
+  show () {
+    this.openedModal = this.modalService.open(this.modal, { centered: true, keyboard: false, size: 'lg' })
+  }
+
+  hide () {
+    this.openedModal.close()
+    this.openedModal = null
+  }
+
+  report () {
+    const reason = this.form.get('reason').value
+    const predefinedReasons = Object.keys(pickBy(this.form.get('predefinedReasons').value)) as AbusePredefinedReasonsString[]
+
+    this.abuseService.reportVideo({
+      reason,
+      predefinedReasons,
+      account: {
+        id: this.account.id
+      }
+    }).subscribe(
+      () => {
+        this.notifier.success(this.i18n('Account reported.'))
+        this.hide()
+      },
+
+      err => this.notifier.error(err.message)
+    )
+  }
+
+  isRemote () {
+    return !this.account.isLocal
+  }
+}
diff --git a/client/src/app/shared/shared-moderation/report-modals/comment-report.component.ts b/client/src/app/shared/shared-moderation/report-modals/comment-report.component.ts
new file mode 100644
index 000000000..00d7b8d34
--- /dev/null
+++ b/client/src/app/shared/shared-moderation/report-modals/comment-report.component.ts
@@ -0,0 +1,94 @@
+import { mapValues, pickBy } from 'lodash-es'
+import { Component, Input, OnInit, ViewChild } from '@angular/core'
+import { Notifier } from '@app/core'
+import { AbuseValidatorsService, FormReactive, FormValidatorService } from '@app/shared/shared-forms'
+import { VideoComment } from '@app/shared/shared-video-comment'
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref'
+import { I18n } from '@ngx-translate/i18n-polyfill'
+import { abusePredefinedReasonsMap, AbusePredefinedReasonsString } from '@shared/models'
+import { AbuseService } from '../abuse.service'
+
+@Component({
+  selector: 'my-comment-report',
+  templateUrl: './report.component.html',
+  styleUrls: [ './report.component.scss' ]
+})
+export class CommentReportComponent extends FormReactive implements OnInit {
+  @Input() comment: VideoComment = null
+
+  @ViewChild('modal', { static: true }) modal: NgbModal
+
+  modalTitle: string
+  error: string = null
+  predefinedReasons: { id: AbusePredefinedReasonsString, label: string, description?: string, help?: string }[] = []
+
+  private openedModal: NgbModalRef
+
+  constructor (
+    protected formValidatorService: FormValidatorService,
+    private modalService: NgbModal,
+    private abuseValidatorsService: AbuseValidatorsService,
+    private abuseService: AbuseService,
+    private notifier: Notifier,
+    private i18n: I18n
+  ) {
+    super()
+  }
+
+  get currentHost () {
+    return window.location.host
+  }
+
+  get originHost () {
+    if (this.isRemote()) {
+      return this.comment.account.host
+    }
+
+    return ''
+  }
+
+  ngOnInit () {
+    this.modalTitle = this.i18n('Report comment')
+
+    this.buildForm({
+      reason: this.abuseValidatorsService.ABUSE_REASON,
+      predefinedReasons: mapValues(abusePredefinedReasonsMap, r => null)
+    })
+
+    this.predefinedReasons = this.abuseService.getPrefefinedReasons('comment')
+  }
+
+  show () {
+    this.openedModal = this.modalService.open(this.modal, { centered: true, keyboard: false, size: 'lg' })
+  }
+
+  hide () {
+    this.openedModal.close()
+    this.openedModal = null
+  }
+
+  report () {
+    const reason = this.form.get('reason').value
+    const predefinedReasons = Object.keys(pickBy(this.form.get('predefinedReasons').value)) as AbusePredefinedReasonsString[]
+
+    this.abuseService.reportVideo({
+      reason,
+      predefinedReasons,
+      comment: {
+        id: this.comment.id
+      }
+    }).subscribe(
+      () => {
+        this.notifier.success(this.i18n('Comment reported.'))
+        this.hide()
+      },
+
+      err => this.notifier.error(err.message)
+    )
+  }
+
+  isRemote () {
+    return !this.comment.isLocal
+  }
+}
diff --git a/client/src/app/shared/shared-moderation/report-modals/index.ts b/client/src/app/shared/shared-moderation/report-modals/index.ts
new file mode 100644
index 000000000..f3c4058ae
--- /dev/null
+++ b/client/src/app/shared/shared-moderation/report-modals/index.ts
@@ -0,0 +1,3 @@
+export * from './account-report.component'
+export * from './comment-report.component'
+export * from './video-report.component'
diff --git a/client/src/app/shared/shared-moderation/report-modals/report.component.html b/client/src/app/shared/shared-moderation/report-modals/report.component.html
new file mode 100644
index 000000000..bda62312f
--- /dev/null
+++ b/client/src/app/shared/shared-moderation/report-modals/report.component.html
@@ -0,0 +1,62 @@
+<ng-template #modal>
+  <div class="modal-header">
+    <h4 class="modal-title">{{ modalTitle }}</h4>
+    <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
+  </div>
+
+  <div class="modal-body">
+    <form novalidate [formGroup]="form" (ngSubmit)="report()">
+
+    <div class="row">
+      <div class="col-5 form-group">
+
+          <label i18n for="reportPredefinedReasons">What is the issue?</label>
+
+          <div class="ml-2 mt-2 d-flex flex-column">
+            <ng-container formGroupName="predefinedReasons">
+
+              <div class="form-group" *ngFor="let reason of predefinedReasons">
+                <my-peertube-checkbox [inputName]="reason.id" [formControlName]="reason.id" [labelText]="reason.label">
+                  <ng-template *ngIf="reason.help" ptTemplate="help">
+                    <div [innerHTML]="reason.help"></div>
+                  </ng-template>
+
+                  <ng-container *ngIf="reason.description" ngProjectAs="description">
+                    <div [innerHTML]="reason.description"></div>
+                  </ng-container>
+                </my-peertube-checkbox>
+              </div>
+
+            </ng-container>
+          </div>
+
+      </div>
+
+      <div class="col-7">
+        <div i18n class="information">
+          Your report will be sent to moderators of {{ currentHost }}<ng-container *ngIf="isRemote()"> and will be forwarded to the comment origin ({{ originHost }}) too</ng-container>.
+        </div>
+
+        <div class="form-group">
+          <textarea
+            i18n-placeholder placeholder="Please describe the issue..." formControlName="reason" ngbAutofocus
+            [ngClass]="{ 'input-error': formErrors['reason'] }" class="form-control"
+          ></textarea>
+          <div *ngIf="formErrors.reason" class="form-error">
+            {{ formErrors.reason }}
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="form-group inputs">
+      <input
+        type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
+        (click)="hide()" (key.enter)="hide()"
+      >
+      <input type="submit" i18n-value value="Submit" class="action-button-submit" [disabled]="!form.valid">
+    </div>
+
+    </form>
+  </div>
+</ng-template>
diff --git a/client/src/app/shared/shared-moderation/video-report.component.scss b/client/src/app/shared/shared-moderation/report-modals/report.component.scss
index b2606cbd8..b2606cbd8 100644
--- a/client/src/app/shared/shared-moderation/video-report.component.scss
+++ b/client/src/app/shared/shared-moderation/report-modals/report.component.scss
diff --git a/client/src/app/shared/shared-moderation/video-report.component.html b/client/src/app/shared/shared-moderation/report-modals/video-report.component.html
index d6beb6d2a..4947088d1 100644
--- a/client/src/app/shared/shared-moderation/video-report.component.html
+++ b/client/src/app/shared/shared-moderation/report-modals/video-report.component.html
@@ -14,16 +14,19 @@
 
           <div class="ml-2 mt-2 d-flex flex-column">
             <ng-container formGroupName="predefinedReasons">
+
               <div class="form-group" *ngFor="let reason of predefinedReasons">
-                <my-peertube-checkbox formControlName="{{reason.id}}" labelText="{{reason.label}}">
+                <my-peertube-checkbox [inputName]="reason.id" [formControlName]="reason.id" [labelText]="reason.label">
                   <ng-template *ngIf="reason.help" ptTemplate="help">
                     <div [innerHTML]="reason.help"></div>
                   </ng-template>
+
                   <ng-container *ngIf="reason.description" ngProjectAs="description">
                     <div [innerHTML]="reason.description"></div>
                   </ng-container>
                 </my-peertube-checkbox>
               </div>
+
             </ng-container>
           </div>
 
@@ -69,11 +72,11 @@
         </div>
 
         <div i18n class="information">
-          Your report will be sent to moderators of {{ currentHost }}<ng-container *ngIf="isRemoteVideo()"> and will be forwarded to the video origin ({{ originHost }}) too</ng-container>.
+          Your report will be sent to moderators of {{ currentHost }}<ng-container *ngIf="isRemote()"> and will be forwarded to the video origin ({{ originHost }}) too</ng-container>.
         </div>
 
         <div class="form-group">
-          <textarea 
+          <textarea
             i18n-placeholder placeholder="Please describe the issue..." formControlName="reason" ngbAutofocus
             [ngClass]="{ 'input-error': formErrors['reason'] }" class="form-control"
           ></textarea>
diff --git a/client/src/app/shared/shared-moderation/report-modals/video-report.component.ts b/client/src/app/shared/shared-moderation/report-modals/video-report.component.ts
new file mode 100644
index 000000000..7d53ea3c9
--- /dev/null
+++ b/client/src/app/shared/shared-moderation/report-modals/video-report.component.ts
@@ -0,0 +1,122 @@
+import { mapValues, pickBy } from 'lodash-es'
+import { buildVideoEmbed, buildVideoLink } from 'src/assets/player/utils'
+import { Component, Input, OnInit, ViewChild } from '@angular/core'
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser'
+import { Notifier } from '@app/core'
+import { AbuseValidatorsService, FormReactive, FormValidatorService } from '@app/shared/shared-forms'
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref'
+import { I18n } from '@ngx-translate/i18n-polyfill'
+import { abusePredefinedReasonsMap, AbusePredefinedReasonsString } from '@shared/models'
+import { Video } from '../../shared-main'
+import { AbuseService } from '../abuse.service'
+
+@Component({
+  selector: 'my-video-report',
+  templateUrl: './video-report.component.html',
+  styleUrls: [ './report.component.scss' ]
+})
+export class VideoReportComponent extends FormReactive implements OnInit {
+  @Input() video: Video = null
+
+  @ViewChild('modal', { static: true }) modal: NgbModal
+
+  error: string = null
+  predefinedReasons: { id: AbusePredefinedReasonsString, label: string, description?: string, help?: string }[] = []
+  embedHtml: SafeHtml
+
+  private openedModal: NgbModalRef
+
+  constructor (
+    protected formValidatorService: FormValidatorService,
+    private modalService: NgbModal,
+    private abuseValidatorsService: AbuseValidatorsService,
+    private abuseService: AbuseService,
+    private notifier: Notifier,
+    private sanitizer: DomSanitizer,
+    private i18n: I18n
+  ) {
+    super()
+  }
+
+  get currentHost () {
+    return window.location.host
+  }
+
+  get originHost () {
+    if (this.isRemote()) {
+      return this.video.account.host
+    }
+
+    return ''
+  }
+
+  get timestamp () {
+    return this.form.get('timestamp').value
+  }
+
+  getVideoEmbed () {
+    return this.sanitizer.bypassSecurityTrustHtml(
+      buildVideoEmbed(
+        buildVideoLink({
+          baseUrl: this.video.embedUrl,
+          title: false,
+          warningTitle: false
+        })
+      )
+    )
+  }
+
+  ngOnInit () {
+    this.buildForm({
+      reason: this.abuseValidatorsService.ABUSE_REASON,
+      predefinedReasons: mapValues(abusePredefinedReasonsMap, r => null),
+      timestamp: {
+        hasStart: null,
+        startAt: null,
+        hasEnd: null,
+        endAt: null
+      }
+    })
+
+    this.predefinedReasons = this.abuseService.getPrefefinedReasons('video')
+
+    this.embedHtml = this.getVideoEmbed()
+  }
+
+  show () {
+    this.openedModal = this.modalService.open(this.modal, { centered: true, keyboard: false, size: 'lg' })
+  }
+
+  hide () {
+    this.openedModal.close()
+    this.openedModal = null
+  }
+
+  report () {
+    const reason = this.form.get('reason').value
+    const predefinedReasons = Object.keys(pickBy(this.form.get('predefinedReasons').value)) as AbusePredefinedReasonsString[]
+    const { hasStart, startAt, hasEnd, endAt } = this.form.get('timestamp').value
+
+    this.abuseService.reportVideo({
+      reason,
+      predefinedReasons,
+      video: {
+        id: this.video.id,
+        startAt: hasStart && startAt ? startAt : undefined,
+        endAt: hasEnd && endAt ? endAt : undefined
+      }
+    }).subscribe(
+      () => {
+        this.notifier.success(this.i18n('Video reported.'))
+        this.hide()
+      },
+
+      err => this.notifier.error(err.message)
+    )
+  }
+
+  isRemote () {
+    return !this.video.isLocal
+  }
+}
diff --git a/client/src/app/shared/shared-moderation/shared-moderation.module.ts b/client/src/app/shared/shared-moderation/shared-moderation.module.ts
index f7e64dfa3..8fa9ee794 100644
--- a/client/src/app/shared/shared-moderation/shared-moderation.module.ts
+++ b/client/src/app/shared/shared-moderation/shared-moderation.module.ts
@@ -3,21 +3,23 @@ import { NgModule } from '@angular/core'
 import { SharedFormModule } from '../shared-forms/shared-form.module'
 import { SharedGlobalIconModule } from '../shared-icons'
 import { SharedMainModule } from '../shared-main/shared-main.module'
+import { SharedVideoCommentModule } from '../shared-video-comment'
+import { AbuseService } from './abuse.service'
 import { BatchDomainsModalComponent } from './batch-domains-modal.component'
 import { BlocklistService } from './blocklist.service'
 import { BulkService } from './bulk.service'
 import { UserBanModalComponent } from './user-ban-modal.component'
 import { UserModerationDropdownComponent } from './user-moderation-dropdown.component'
-import { VideoAbuseService } from './video-abuse.service'
 import { VideoBlockComponent } from './video-block.component'
 import { VideoBlockService } from './video-block.service'
-import { VideoReportComponent } from './video-report.component'
+import { VideoReportComponent, AccountReportComponent, CommentReportComponent } from './report-modals'
 
 @NgModule({
   imports: [
     SharedMainModule,
     SharedFormModule,
-    SharedGlobalIconModule
+    SharedGlobalIconModule,
+    SharedVideoCommentModule
   ],
 
   declarations: [
@@ -25,7 +27,9 @@ import { VideoReportComponent } from './video-report.component'
     UserModerationDropdownComponent,
     VideoBlockComponent,
     VideoReportComponent,
-    BatchDomainsModalComponent
+    BatchDomainsModalComponent,
+    CommentReportComponent,
+    AccountReportComponent
   ],
 
   exports: [
@@ -33,13 +37,15 @@ import { VideoReportComponent } from './video-report.component'
     UserModerationDropdownComponent,
     VideoBlockComponent,
     VideoReportComponent,
-    BatchDomainsModalComponent
+    BatchDomainsModalComponent,
+    CommentReportComponent,
+    AccountReportComponent
   ],
 
   providers: [
     BlocklistService,
     BulkService,
-    VideoAbuseService,
+    AbuseService,
     VideoBlockService
   ]
 })
diff --git a/client/src/app/shared/shared-moderation/user-moderation-dropdown.component.ts b/client/src/app/shared/shared-moderation/user-moderation-dropdown.component.ts
index d3c37f082..78c2658df 100644
--- a/client/src/app/shared/shared-moderation/user-moderation-dropdown.component.ts
+++ b/client/src/app/shared/shared-moderation/user-moderation-dropdown.component.ts
@@ -16,6 +16,7 @@ export class UserModerationDropdownComponent implements OnInit, OnChanges {
 
   @Input() user: User
   @Input() account: Account
+  @Input() prependActions: DropdownAction<{ user: User, account: Account }>[]
 
   @Input() buttonSize: 'normal' | 'small' = 'normal'
   @Input() placement = 'left-top left-bottom auto'
@@ -250,6 +251,12 @@ export class UserModerationDropdownComponent implements OnInit, OnChanges {
   private buildActions () {
     this.userActions = []
 
+    if (this.prependActions) {
+      this.userActions = [
+        this.prependActions
+      ]
+    }
+
     if (this.authService.isLoggedIn()) {
       const authUser = this.authService.getUser()
 
diff --git a/client/src/app/shared/shared-moderation/video-abuse.service.ts b/client/src/app/shared/shared-moderation/video-abuse.service.ts
deleted file mode 100644
index 44dea44a5..000000000
--- a/client/src/app/shared/shared-moderation/video-abuse.service.ts
+++ /dev/null
@@ -1,98 +0,0 @@
-import { omit } from 'lodash-es'
-import { SortMeta } from 'primeng/api'
-import { Observable } from 'rxjs'
-import { catchError, map } from 'rxjs/operators'
-import { HttpClient, HttpParams } from '@angular/common/http'
-import { Injectable } from '@angular/core'
-import { RestExtractor, RestPagination, RestService } from '@app/core'
-import { ResultList, VideoAbuse, VideoAbuseCreate, VideoAbuseState, VideoAbuseUpdate } from '@shared/models'
-import { environment } from '../../../environments/environment'
-
-@Injectable()
-export class VideoAbuseService {
-  private static BASE_VIDEO_ABUSE_URL = environment.apiUrl + '/api/v1/videos/'
-
-  constructor (
-    private authHttp: HttpClient,
-    private restService: RestService,
-    private restExtractor: RestExtractor
-  ) {}
-
-  getVideoAbuses (options: {
-    pagination: RestPagination,
-    sort: SortMeta,
-    search?: string
-  }): Observable<ResultList<VideoAbuse>> {
-    const { pagination, sort, search } = options
-    const url = VideoAbuseService.BASE_VIDEO_ABUSE_URL + 'abuse'
-
-    let params = new HttpParams()
-    params = this.restService.addRestGetParams(params, pagination, sort)
-
-    if (search) {
-      const filters = this.restService.parseQueryStringFilter(search, {
-        id: { prefix: '#' },
-        state: {
-          prefix: 'state:',
-          handler: v => {
-            if (v === 'accepted') return VideoAbuseState.ACCEPTED
-            if (v === 'pending') return VideoAbuseState.PENDING
-            if (v === 'rejected') return VideoAbuseState.REJECTED
-
-            return undefined
-          }
-        },
-        videoIs: {
-          prefix: 'videoIs:',
-          handler: v => {
-            if (v === 'deleted') return v
-            if (v === 'blacklisted') return v
-
-            return undefined
-          }
-        },
-        searchReporter: { prefix: 'reporter:' },
-        searchReportee: { prefix: 'reportee:' },
-        predefinedReason: { prefix: 'tag:' }
-      })
-
-      params = this.restService.addObjectParams(params, filters)
-    }
-
-    return this.authHttp.get<ResultList<VideoAbuse>>(url, { params })
-               .pipe(
-                 catchError(res => this.restExtractor.handleError(res))
-               )
-  }
-
-  reportVideo (parameters: { id: number } & VideoAbuseCreate) {
-    const url = VideoAbuseService.BASE_VIDEO_ABUSE_URL + parameters.id + '/abuse'
-
-    const body = omit(parameters, [ 'id' ])
-
-    return this.authHttp.post(url, body)
-               .pipe(
-                 map(this.restExtractor.extractDataBool),
-                 catchError(res => this.restExtractor.handleError(res))
-               )
-  }
-
-  updateVideoAbuse (videoAbuse: VideoAbuse, abuseUpdate: VideoAbuseUpdate) {
-    const url = VideoAbuseService.BASE_VIDEO_ABUSE_URL + videoAbuse.video.uuid + '/abuse/' + videoAbuse.id
-
-    return this.authHttp.put(url, abuseUpdate)
-               .pipe(
-                 map(this.restExtractor.extractDataBool),
-                 catchError(res => this.restExtractor.handleError(res))
-               )
-  }
-
-  removeVideoAbuse (videoAbuse: VideoAbuse) {
-    const url = VideoAbuseService.BASE_VIDEO_ABUSE_URL + videoAbuse.video.uuid + '/abuse/' + videoAbuse.id
-
-    return this.authHttp.delete(url)
-               .pipe(
-                 map(this.restExtractor.extractDataBool),
-                 catchError(res => this.restExtractor.handleError(res))
-               )
-  }}
diff --git a/client/src/app/shared/shared-moderation/video-report.component.ts b/client/src/app/shared/shared-moderation/video-report.component.ts
deleted file mode 100644
index 11c805636..000000000
--- a/client/src/app/shared/shared-moderation/video-report.component.ts
+++ /dev/null
@@ -1,161 +0,0 @@
-import { mapValues, pickBy } from 'lodash-es'
-import { buildVideoEmbed, buildVideoLink } from 'src/assets/player/utils'
-import { Component, Input, OnInit, ViewChild } from '@angular/core'
-import { DomSanitizer, SafeHtml } from '@angular/platform-browser'
-import { Notifier } from '@app/core'
-import { FormReactive, FormValidatorService, VideoAbuseValidatorsService } from '@app/shared/shared-forms'
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref'
-import { I18n } from '@ngx-translate/i18n-polyfill'
-import { videoAbusePredefinedReasonsMap, VideoAbusePredefinedReasonsString } from '@shared/models/videos/abuse/video-abuse-reason.model'
-import { Video } from '../shared-main'
-import { VideoAbuseService } from './video-abuse.service'
-
-@Component({
-  selector: 'my-video-report',
-  templateUrl: './video-report.component.html',
-  styleUrls: [ './video-report.component.scss' ]
-})
-export class VideoReportComponent extends FormReactive implements OnInit {
-  @Input() video: Video = null
-
-  @ViewChild('modal', { static: true }) modal: NgbModal
-
-  error: string = null
-  predefinedReasons: { id: VideoAbusePredefinedReasonsString, label: string, description?: string, help?: string }[] = []
-  embedHtml: SafeHtml
-
-  private openedModal: NgbModalRef
-
-  constructor (
-    protected formValidatorService: FormValidatorService,
-    private modalService: NgbModal,
-    private videoAbuseValidatorsService: VideoAbuseValidatorsService,
-    private videoAbuseService: VideoAbuseService,
-    private notifier: Notifier,
-    private sanitizer: DomSanitizer,
-    private i18n: I18n
-  ) {
-    super()
-  }
-
-  get currentHost () {
-    return window.location.host
-  }
-
-  get originHost () {
-    if (this.isRemoteVideo()) {
-      return this.video.account.host
-    }
-
-    return ''
-  }
-
-  get timestamp () {
-    return this.form.get('timestamp').value
-  }
-
-  getVideoEmbed () {
-    return this.sanitizer.bypassSecurityTrustHtml(
-      buildVideoEmbed(
-        buildVideoLink({
-          baseUrl: this.video.embedUrl,
-          title: false,
-          warningTitle: false
-        })
-      )
-    )
-  }
-
-  ngOnInit () {
-    this.buildForm({
-      reason: this.videoAbuseValidatorsService.VIDEO_ABUSE_REASON,
-      predefinedReasons: mapValues(videoAbusePredefinedReasonsMap, r => null),
-      timestamp: {
-        hasStart: null,
-        startAt: null,
-        hasEnd: null,
-        endAt: null
-      }
-    })
-
-    this.predefinedReasons = [
-      {
-        id: 'violentOrRepulsive',
-        label: this.i18n('Violent or repulsive'),
-        help: this.i18n('Contains offensive, violent, or coarse language or iconography.')
-      },
-      {
-        id: 'hatefulOrAbusive',
-        label: this.i18n('Hateful or abusive'),
-        help: this.i18n('Contains abusive, racist or sexist language or iconography.')
-      },
-      {
-        id: 'spamOrMisleading',
-        label: this.i18n('Spam, ad or false news'),
-        help: this.i18n('Contains marketing, spam, purposefully deceitful news, or otherwise misleading thumbnail/text/tags. Please provide reputable sources to report hoaxes.')
-      },
-      {
-        id: 'privacy',
-        label: this.i18n('Privacy breach or doxxing'),
-        help: this.i18n('Contains personal information that could be used to track, identify, contact or impersonate someone (e.g. name, address, phone number, email, or credit card details).')
-      },
-      {
-        id: 'rights',
-        label: this.i18n('Intellectual property violation'),
-        help: this.i18n('Infringes my intellectual property or copyright, wrt. the regional rules with which the server must comply.')
-      },
-      {
-        id: 'serverRules',
-        label: this.i18n('Breaks server rules'),
-        description: this.i18n('Anything not included in the above that breaks the terms of service, code of conduct, or general rules in place on the server.')
-      },
-      {
-        id: 'thumbnails',
-        label: this.i18n('Thumbnails'),
-        help: this.i18n('The above can only be seen in thumbnails.')
-      },
-      {
-        id: 'captions',
-        label: this.i18n('Captions'),
-        help: this.i18n('The above can only be seen in captions (please describe which).')
-      }
-    ]
-
-    this.embedHtml = this.getVideoEmbed()
-  }
-
-  show () {
-    this.openedModal = this.modalService.open(this.modal, { centered: true, keyboard: false, size: 'lg' })
-  }
-
-  hide () {
-    this.openedModal.close()
-    this.openedModal = null
-  }
-
-  report () {
-    const reason = this.form.get('reason').value
-    const predefinedReasons = Object.keys(pickBy(this.form.get('predefinedReasons').value)) as VideoAbusePredefinedReasonsString[]
-    const { hasStart, startAt, hasEnd, endAt } = this.form.get('timestamp').value
-
-    this.videoAbuseService.reportVideo({
-      id: this.video.id,
-      reason,
-      predefinedReasons,
-      startAt: hasStart && startAt ? startAt : undefined,
-      endAt: hasEnd && endAt ? endAt : undefined
-    }).subscribe(
-      () => {
-        this.notifier.success(this.i18n('Video reported.'))
-        this.hide()
-      },
-
-      err => this.notifier.error(err.message)
-    )
-  }
-
-  isRemoteVideo () {
-    return !this.video.isLocal
-  }
-}
diff --git a/client/src/app/shared/shared-video-comment/index.ts b/client/src/app/shared/shared-video-comment/index.ts
new file mode 100644
index 000000000..b1195f232
--- /dev/null
+++ b/client/src/app/shared/shared-video-comment/index.ts
@@ -0,0 +1,5 @@
+export * from './video-comment.service'
+export * from './video-comment.model'
+export * from './video-comment-thread-tree.model'
+
+export * from './shared-video-comment.module'
diff --git a/client/src/app/shared/shared-video-comment/shared-video-comment.module.ts b/client/src/app/shared/shared-video-comment/shared-video-comment.module.ts
new file mode 100644
index 000000000..41b329861
--- /dev/null
+++ b/client/src/app/shared/shared-video-comment/shared-video-comment.module.ts
@@ -0,0 +1,19 @@
+
+import { NgModule } from '@angular/core'
+import { SharedMainModule } from '../shared-main/shared-main.module'
+import { VideoCommentService } from './video-comment.service'
+
+@NgModule({
+  imports: [
+    SharedMainModule
+  ],
+
+  declarations: [ ],
+
+  exports: [ ],
+
+  providers: [
+    VideoCommentService
+  ]
+})
+export class SharedVideoCommentModule { }
diff --git a/client/src/app/shared/shared-video-comment/video-comment-thread-tree.model.ts b/client/src/app/shared/shared-video-comment/video-comment-thread-tree.model.ts
new file mode 100644
index 000000000..7c2aaeadd
--- /dev/null
+++ b/client/src/app/shared/shared-video-comment/video-comment-thread-tree.model.ts
@@ -0,0 +1,7 @@
+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/shared/shared-video-comment/video-comment.model.ts b/client/src/app/shared/shared-video-comment/video-comment.model.ts
new file mode 100644
index 000000000..e85443196
--- /dev/null
+++ b/client/src/app/shared/shared-video-comment/video-comment.model.ts
@@ -0,0 +1,48 @@
+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/shared/shared-video-comment/video-comment.service.ts b/client/src/app/shared/shared-video-comment/video-comment.service.ts
new file mode 100644
index 000000000..81c65aa38
--- /dev/null
+++ b/client/src/app/shared/shared-video-comment/video-comment.service.ts
@@ -0,0 +1,149 @@
+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
+  }
+}