Use 3 tables to represent abuses

9 files changed, 763 insertions, 0 deletions

diff --git a/client/src/app/+admin/moderation/abuse-list/abuse-details.component.html b/client/src/app/+admin/moderation/abuse-list/abuse-details.component.html
new file mode 100644
index 000000000..d031ea8ed
--- /dev/null
+++ b/client/src/app/+admin/moderation/abuse-list/abuse-details.component.html
@@ -0,0 +1,93 @@
+<div class="d-flex moderation-expanded">
+  <!-- report left part (report details) -->
+  <div class="col-8">
+
+    <!-- report metadata -->
+    <div class="d-flex">
+      <span class="col-3 moderation-expanded-label" i18n>Reporter</span>
+      <span class="col-9 moderation-expanded-text">
+        <a [routerLink]="[ '/admin/moderation/abuses/list' ]" [queryParams]="{ 'search': 'reporter:&quot;' + abuse.reporterAccount.displayName + '&quot;' }" class="chip">
+          <img
+            class="avatar"
+            [src]="abuse.reporterAccount.avatar?.path"
+            (error)="switchToDefaultAvatar($event)"
+            alt="Avatar"
+          >
+          <div>
+            <span class="text-muted">{{ abuse.reporterAccount.nameWithHost }}</span>
+          </div>
+        </a>
+        <a [routerLink]="[ '/admin/moderation/abuses/list' ]" [queryParams]="{ 'search': 'reporter:&quot;' + abuse.reporterAccount.displayName + '&quot;' }" class="ml-auto text-muted video-details-links" i18n>
+          {abuse.countReportsForReporter, plural, =1 {1 report} other {{{ abuse.countReportsForReporter }} reports}}<span class="ml-1 glyphicon glyphicon-flag"></span>
+        </a>
+      </span>
+    </div>
+
+    <div class="d-flex">
+      <span class="col-3 moderation-expanded-label" i18n>Reportee</span>
+      <span class="col-9 moderation-expanded-text">
+        <a [routerLink]="[ '/admin/moderation/abuses/list' ]" [queryParams]="{ 'search': 'reportee:&quot;' +abuse.video.channel.ownerAccount.displayName + '&quot;' }" class="chip">
+          <img
+            class="avatar"
+            [src]="abuse.video.channel.ownerAccount?.avatar?.path"
+            (error)="switchToDefaultAvatar($event)"
+            alt="Avatar"
+          >
+          <div>
+            <span class="text-muted">{{ abuse.video.channel.ownerAccount ? abuse.video.channel.ownerAccount.nameWithHost : '' }}</span>
+          </div>
+        </a>
+        <a [routerLink]="[ '/admin/moderation/abuses/list' ]" [queryParams]="{ 'search': 'reportee:&quot;' +abuse.video.channel.ownerAccount.displayName + '&quot;' }" class="ml-auto text-muted video-details-links" i18n>
+          {abuse.countReportsForReportee, plural, =1 {1 report} other {{{ abuse.countReportsForReportee }} reports}}<span class="ml-1 glyphicon glyphicon-flag"></span>
+        </a>
+      </span>
+    </div>
+
+    <div class="d-flex" *ngIf="abuse.updatedAt">
+      <span class="col-3 moderation-expanded-label" i18n>Updated</span>
+      <time class="col-9 moderation-expanded-text video-details-date-updated">{{ abuse.updatedAt | date: 'medium' }}</time>
+    </div>
+
+    <!-- report text -->
+    <div class="mt-3 d-flex">
+      <span class="col-3 moderation-expanded-label">
+        <ng-container i18n>Report</ng-container>
+        <a [routerLink]="[ '/admin/moderation/abuses/list' ]" [queryParams]="{ 'search': '#' + abuse.id  }" class="ml-1 text-muted">#{{ abuse.id }}</a>
+      </span>
+      <span class="col-9 moderation-expanded-text" [innerHTML]="abuse.reasonHtml"></span>
+    </div>
+
+    <div *ngIf="getPredefinedReasons()" class="mt-2 d-flex">
+      <span class="col-3"></span>
+      <span class="col-9">
+        <a [routerLink]="[ '/admin/moderation/abuses/list' ]" [queryParams]="{ 'search': 'tag:' + reason.id  }" class="chip rectangular bg-secondary text-light" *ngFor="let reason of getPredefinedReasons()">
+          <div>{{ reason.label }}</div>
+        </a>
+      </span>
+    </div>
+
+    <div *ngIf="abuse.startAt" class="mt-2 d-flex">
+      <span class="col-3 moderation-expanded-label" i18n>Reported part</span>
+      <span class="col-9">
+        {{ startAt }}<ng-container *ngIf="abuse.endAt"> - {{ endAt }}</ng-container>
+      </span>
+    </div>
+
+    <div class="mt-3 d-flex" *ngIf="abuse.moderationComment">
+      <span class="col-3 moderation-expanded-label" i18n>Note</span>
+      <span class="col-9 moderation-expanded-text" [innerHTML]="abuse.moderationCommentHtml"></span>
+    </div>
+
+  </div>
+
+  <!-- report right part (video details) -->
+  <div class="col-4">
+    <div class="screenratio">
+      <div *ngIf="abuse.video.deleted || abuse.video.blacklisted">
+        <span i18n *ngIf="abuse.video.deleted">The video was deleted</span>
+        <span i18n *ngIf="!abuse.video.deleted">The video was blocked</span>
+      </div>
+      <div *ngIf="!abuse.video.deleted && !abuse.video.blacklisted" [innerHTML]="abuse.embedHtml"></div>
+    </div>
+  </div>
+</div>
diff --git a/client/src/app/+admin/moderation/abuse-list/abuse-details.component.ts b/client/src/app/+admin/moderation/abuse-list/abuse-details.component.ts
new file mode 100644
index 000000000..8f87630b8
--- /dev/null
+++ b/client/src/app/+admin/moderation/abuse-list/abuse-details.component.ts
@@ -0,0 +1,52 @@
+import { Component, Input } from '@angular/core'
+import { Actor } from '@app/shared/shared-main'
+import { I18n } from '@ngx-translate/i18n-polyfill'
+import { AbusePredefinedReasonsString } from '@shared/models'
+import { ProcessedAbuse } from './abuse-list.component'
+import { durationToString } from '@app/helpers'
+
+@Component({
+  selector: 'my-abuse-details',
+  templateUrl: './abuse-details.component.html',
+  styleUrls: [ '../moderation.component.scss' ]
+})
+export class AbuseDetailsComponent {
+  @Input() abuse: ProcessedAbuse
+
+  private predefinedReasonsTranslations: { [key in AbusePredefinedReasonsString]: string }
+
+  constructor (
+    private i18n: I18n
+  ) {
+    this.predefinedReasonsTranslations = {
+      violentOrRepulsive: this.i18n('Violent or Repulsive'),
+      hatefulOrAbusive: this.i18n('Hateful or Abusive'),
+      spamOrMisleading: this.i18n('Spam or Misleading'),
+      privacy: this.i18n('Privacy'),
+      rights: this.i18n('Rights'),
+      serverRules: this.i18n('Server rules'),
+      thumbnails: this.i18n('Thumbnails'),
+      captions: this.i18n('Captions')
+    }
+  }
+
+  get startAt () {
+    return durationToString(this.abuse.startAt)
+  }
+
+  get endAt () {
+    return durationToString(this.abuse.endAt)
+  }
+
+  getPredefinedReasons () {
+    if (!this.abuse.predefinedReasons) return []
+    return this.abuse.predefinedReasons.map(r => ({
+      id: r,
+      label: this.predefinedReasonsTranslations[r]
+    }))
+  }
+
+  switchToDefaultAvatar ($event: Event) {
+    ($event.target as HTMLImageElement).src = Actor.GET_DEFAULT_AVATAR_URL()
+  }
+}
diff --git a/client/src/app/+admin/moderation/abuse-list/abuse-list.component.html b/client/src/app/+admin/moderation/abuse-list/abuse-list.component.html
new file mode 100644
index 000000000..167f32fe6
--- /dev/null
+++ b/client/src/app/+admin/moderation/abuse-list/abuse-list.component.html
@@ -0,0 +1,149 @@
+<p-table
+  [value]="abuses" [lazy]="true" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [rowsPerPageOptions]="rowsPerPageOptions"
+  [sortField]="sort.field" [sortOrder]="sort.order" (onLazyLoad)="loadLazy($event)" dataKey="id" [resizableColumns]="true"
+  [showCurrentPageReport]="true" i18n-currentPageReportTemplate
+  currentPageReportTemplate="Showing {{'{first}'}} to {{'{last}'}} of {{'{totalRecords}'}} reports"
+  (onPage)="onPage($event)" [expandedRowKeys]="expandedRows"
+>
+  <ng-template pTemplate="caption">
+    <div class="caption">
+      <div class="ml-auto">
+        <div class="input-group has-feedback has-clear">
+          <div class="input-group-prepend c-hand" ngbDropdown placement="bottom-left auto" container="body">
+            <div class="input-group-text" ngbDropdownToggle>
+              <span class="caret" aria-haspopup="menu" role="button"></span>
+            </div>
+
+            <div role="menu" ngbDropdownMenu>
+              <h6 class="dropdown-header" i18n>Advanced report filters</h6>
+              <a [routerLink]="[ '/admin/moderation/abuses/list' ]" [queryParams]="{ 'search': 'state:pending' }" class="dropdown-item" i18n>Unsolved reports</a>
+              <a [routerLink]="[ '/admin/moderation/abuses/list' ]" [queryParams]="{ 'search': 'state:accepted' }" class="dropdown-item" i18n>Accepted reports</a>
+              <a [routerLink]="[ '/admin/moderation/abuses/list' ]" [queryParams]="{ 'search': 'state:rejected' }" class="dropdown-item" i18n>Refused reports</a>
+              <a [routerLink]="[ '/admin/moderation/abuses/list' ]" [queryParams]="{ 'search': 'videoIs:blacklisted' }" class="dropdown-item" i18n>Reports with blocked videos</a>
+              <a [routerLink]="[ '/admin/moderation/abuses/list' ]" [queryParams]="{ 'search': 'videoIs:deleted' }" class="dropdown-item" i18n>Reports with deleted videos</a>
+            </div>
+          </div>
+          <input
+            type="text" name="table-filter" id="table-filter" i18n-placeholder placeholder="Filter..."
+            (keyup)="onAbuseSearch($event)"
+          >
+          <a class="glyphicon glyphicon-remove-sign form-control-feedback form-control-clear" (click)="resetTableFilter()"></a>
+          <span class="sr-only" i18n>Clear filters</span>
+        </div>
+      </div>
+    </div>
+  </ng-template>
+
+  <ng-template pTemplate="header">
+    <tr> <!-- header -->
+      <th style="width: 40px;"></th>
+      <th style="width: 20%;" pResizableColumn i18n>Reporter</th>
+      <th i18n>Video</th>
+      <th style="width: 150px;" i18n pSortableColumn="createdAt">Created <p-sortIcon field="createdAt"></p-sortIcon></th>
+      <th i18n pSortableColumn="state" style="width: 80px;">State <p-sortIcon field="state"></p-sortIcon></th>
+      <th style="width: 150px;"></th>
+    </tr>
+  </ng-template>
+
+  <ng-template pTemplate="body" let-expanded="expanded" let-abuse>
+    <tr>
+      <td class="c-hand" [pRowToggler]="abuse" i18n-ngbTooltip ngbTooltip="More information" placement="top-left" container="body">
+        <span class="expander">
+          <i [ngClass]="expanded ? 'glyphicon glyphicon-menu-down' : 'glyphicon glyphicon-menu-right'"></i>
+        </span>
+      </td>
+
+      <td>
+        <a [href]="abuse.reporterAccount.url" i18n-title title="Open account in a new tab" target="_blank" rel="noopener noreferrer">
+          <div class="chip two-lines">
+            <img
+              class="avatar"
+              [src]="abuse.reporterAccount.avatar?.path"
+              (error)="switchToDefaultAvatar($event)"
+              alt="Avatar"
+            >
+            <div>
+              {{ abuse.reporterAccount.displayName }}
+              <span class="text-muted">{{ abuse.reporterAccount.nameWithHost }}</span>
+            </div>
+          </div>
+        </a>
+      </td>
+
+      <td *ngIf="!abuse.video.deleted">
+        <a [href]="getVideoUrl(abuse)" class="video-table-video-link" [title]="abuse.video.name" target="_blank" rel="noopener noreferrer">
+          <div class="video-table-video">
+            <div class="video-table-video-image">
+              <img [src]="abuse.video.thumbnailPath">
+              <span
+                class="video-table-video-image-label" *ngIf="abuse.count > 1"
+                i18n-title title="This video has been reported multiple times."
+              >
+                {{ abuse.nth }}/{{ abuse.count }}
+              </span>
+            </div>
+            <div class="video-table-video-text">
+              <div>
+                <span *ngIf="!abuse.video.blacklisted" class="glyphicon glyphicon-new-window"></span>
+                <span *ngIf="abuse.video.blacklisted" i18n-title title="The video was blocked" class="glyphicon glyphicon-ban-circle"></span>
+                {{ abuse.video.name }}
+              </div>
+              <div class="text-muted" i18n>by {{ abuse.video.channel?.displayName }} on {{ abuse.video.channel?.host }} </div>
+            </div>
+          </div>
+        </a>
+      </td>
+
+      <td *ngIf="abuse.video.deleted" class="c-hand" [pRowToggler]="abuse">
+        <div class="video-table-video" i18n-title title="Video was deleted">
+          <div class="video-table-video-image">
+            <span i18n>Deleted</span>
+          </div>
+          <div class="video-table-video-text">
+            <div>
+              {{ abuse.video.name }}
+              <span class="glyphicon glyphicon-trash"></span>
+            </div>
+            <div class="text-muted" i18n>by {{ abuse.video.channel?.displayName }} on {{ abuse.video.channel?.host }} </div>
+          </div>
+        </div>
+      </td>
+
+      <td class="c-hand" [pRowToggler]="abuse">{{ abuse.createdAt | date: 'short'  }}</td>
+
+      <td class="c-hand video-abuse-states" [pRowToggler]="abuse">
+        <span *ngIf="isAbuseAccepted(abuse)" [title]="abuse.state.label" class="glyphicon glyphicon-ok"></span>
+        <span *ngIf="isAbuseRejected(abuse)" [title]="abuse.state.label" class="glyphicon glyphicon-remove"></span>
+        <span *ngIf="abuse.moderationComment" container="body" placement="left auto" [ngbTooltip]="abuse.moderationComment" class="glyphicon glyphicon-comment"></span>
+      </td>
+
+      <td class="action-cell">
+        <my-action-dropdown
+          [ngClass]="{ 'show': expanded }" placement="bottom-right top-right left auto" container="body"
+          i18n-label label="Actions" [actions]="abuseActions" [entry]="abuse"
+        ></my-action-dropdown>
+      </td>
+    </tr>
+  </ng-template>
+
+  <ng-template pTemplate="rowexpansion" let-abuse>
+      <tr>
+        <td class="expand-cell" colspan="6">
+          <my-abuse-details [abuse]="abuse"></my-abuse-details>
+        </td>
+      </tr>
+  </ng-template>
+
+  <ng-template pTemplate="emptymessage">
+    <tr>
+      <td colspan="6">
+        <div class="no-results">
+          <ng-container *ngIf="search" i18n>No video abuses found matching current filters.</ng-container>
+          <ng-container *ngIf="!search" i18n>No video abuses found.</ng-container>
+        </div>
+      </td>
+    </tr>
+  </ng-template>
+</p-table>
+
+<my-moderation-comment-modal #moderationCommentModal (commentUpdated)="onModerationCommentUpdated()"></my-moderation-comment-modal>
diff --git a/client/src/app/+admin/moderation/abuse-list/abuse-list.component.scss b/client/src/app/+admin/moderation/abuse-list/abuse-list.component.scss
new file mode 100644
index 000000000..8eee15b64
--- /dev/null
+++ b/client/src/app/+admin/moderation/abuse-list/abuse-list.component.scss
@@ -0,0 +1,23 @@
+@import 'mixins';
+@import 'miniature';
+
+.video-details-date-updated {
+  font-size: 90%;
+  margin-top: .1rem;
+}
+
+.video-details-links {
+  @include disable-default-a-behaviour;
+}
+
+.video-abuse-states .glyphicon-comment {
+  margin-left: 0.5rem;
+}
+
+.input-group {
+  @include peertube-input-group(300px);
+
+  .dropdown-toggle::after {
+    margin-left: 0;
+  }
+}
diff --git a/client/src/app/+admin/moderation/abuse-list/abuse-list.component.ts b/client/src/app/+admin/moderation/abuse-list/abuse-list.component.ts
new file mode 100644
index 000000000..427ec4d5d
--- /dev/null
+++ b/client/src/app/+admin/moderation/abuse-list/abuse-list.component.ts
@@ -0,0 +1,329 @@
+import { SortMeta } from 'primeng/api'
+import { buildVideoEmbed, buildVideoLink } from 'src/assets/player/utils'
+import { environment } from 'src/environments/environment'
+import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core'
+import { DomSanitizer } from '@angular/platform-browser'
+import { ActivatedRoute, Params, Router } from '@angular/router'
+import { ConfirmService, MarkdownService, Notifier, RestPagination, RestTable } from '@app/core'
+import { Account, Actor, DropdownAction, Video, VideoService } from '@app/shared/shared-main'
+import { AbuseService, BlocklistService, VideoBlockService } from '@app/shared/shared-moderation'
+import { I18n } from '@ngx-translate/i18n-polyfill'
+import { Abuse, AbuseState } from '@shared/models'
+import { ModerationCommentModalComponent } from './moderation-comment-modal.component'
+
+export type ProcessedAbuse = Abuse & {
+  moderationCommentHtml?: string,
+  reasonHtml?: string
+  embedHtml?: string
+  updatedAt?: Date
+
+  // override bare server-side definitions with rich client-side definitions
+  reporterAccount: Account
+
+  video: Abuse['video'] & {
+    channel: Abuse['video']['channel'] & {
+      ownerAccount: Account
+    }
+  }
+}
+
+@Component({
+  selector: 'my-abuse-list',
+  templateUrl: './abuse-list.component.html',
+  styleUrls: [ '../moderation.component.scss', './abuse-list.component.scss' ]
+})
+export class AbuseListComponent extends RestTable implements OnInit, AfterViewInit {
+  @ViewChild('moderationCommentModal', { static: true }) moderationCommentModal: ModerationCommentModalComponent
+
+  abuses: ProcessedAbuse[] = []
+  totalRecords = 0
+  sort: SortMeta = { field: 'createdAt', order: 1 }
+  pagination: RestPagination = { count: this.rowsPerPage, start: 0 }
+
+  abuseActions: DropdownAction<Abuse>[][] = []
+
+  constructor (
+    private notifier: Notifier,
+    private abuseService: AbuseService,
+    private blocklistService: BlocklistService,
+    private videoService: VideoService,
+    private videoBlocklistService: VideoBlockService,
+    private confirmService: ConfirmService,
+    private i18n: I18n,
+    private markdownRenderer: MarkdownService,
+    private sanitizer: DomSanitizer,
+    private route: ActivatedRoute,
+    private router: Router
+  ) {
+    super()
+
+    this.abuseActions = [
+      [
+        {
+          label: this.i18n('Internal actions'),
+          isHeader: true
+        },
+        {
+          label: this.i18n('Delete report'),
+          handler: abuse => this.removeAbuse(abuse)
+        },
+        {
+          label: this.i18n('Add note'),
+          handler: abuse => this.openModerationCommentModal(abuse),
+          isDisplayed: abuse => !abuse.moderationComment
+        },
+        {
+          label: this.i18n('Update note'),
+          handler: abuse => this.openModerationCommentModal(abuse),
+          isDisplayed: abuse => !!abuse.moderationComment
+        },
+        {
+          label: this.i18n('Mark as accepted'),
+          handler: abuse => this.updateAbuseState(abuse, AbuseState.ACCEPTED),
+          isDisplayed: abuse => !this.isAbuseAccepted(abuse)
+        },
+        {
+          label: this.i18n('Mark as rejected'),
+          handler: abuse => this.updateAbuseState(abuse, AbuseState.REJECTED),
+          isDisplayed: abuse => !this.isAbuseRejected(abuse)
+        }
+      ],
+      [
+        {
+          label: this.i18n('Actions for the video'),
+          isHeader: true,
+          isDisplayed: abuse => !abuse.video.deleted
+        },
+        {
+          label: this.i18n('Block video'),
+          isDisplayed: abuse => !abuse.video.deleted && !abuse.video.blacklisted,
+          handler: abuse => {
+            this.videoBlocklistService.blockVideo(abuse.video.id, undefined, true)
+              .subscribe(
+                () => {
+                  this.notifier.success(this.i18n('Video blocked.'))
+
+                  this.updateAbuseState(abuse, AbuseState.ACCEPTED)
+                },
+
+                err => this.notifier.error(err.message)
+              )
+          }
+        },
+        {
+          label: this.i18n('Unblock video'),
+          isDisplayed: abuse => !abuse.video.deleted && abuse.video.blacklisted,
+          handler: abuse => {
+            this.videoBlocklistService.unblockVideo(abuse.video.id)
+              .subscribe(
+                () => {
+                  this.notifier.success(this.i18n('Video unblocked.'))
+
+                  this.updateAbuseState(abuse, AbuseState.ACCEPTED)
+                },
+
+                err => this.notifier.error(err.message)
+              )
+          }
+        },
+        {
+          label: this.i18n('Delete video'),
+          isDisplayed: abuse => !abuse.video.deleted,
+          handler: async abuse => {
+            const res = await this.confirmService.confirm(
+              this.i18n('Do you really want to delete this video?'),
+              this.i18n('Delete')
+            )
+            if (res === false) return
+
+            this.videoService.removeVideo(abuse.video.id)
+              .subscribe(
+                () => {
+                  this.notifier.success(this.i18n('Video deleted.'))
+
+                  this.updateAbuseState(abuse, AbuseState.ACCEPTED)
+                },
+
+                err => this.notifier.error(err.message)
+              )
+          }
+        }
+      ],
+      [
+        {
+          label: this.i18n('Actions for the reporter'),
+          isHeader: true
+        },
+        {
+          label: this.i18n('Mute reporter'),
+          handler: async abuse => {
+            const account = abuse.reporterAccount as Account
+
+            this.blocklistService.blockAccountByInstance(account)
+              .subscribe(
+                () => {
+                  this.notifier.success(
+                    this.i18n('Account {{nameWithHost}} muted by the instance.', { nameWithHost: account.nameWithHost })
+                  )
+
+                  account.mutedByInstance = true
+                },
+
+                err => this.notifier.error(err.message)
+              )
+          }
+        },
+        {
+          label: this.i18n('Mute server'),
+          isDisplayed: abuse => !abuse.reporterAccount.userId,
+          handler: async abuse => {
+            this.blocklistService.blockServerByInstance(abuse.reporterAccount.host)
+              .subscribe(
+                () => {
+                  this.notifier.success(
+                    this.i18n('Server {{host}} muted by the instance.', { host: abuse.reporterAccount.host })
+                  )
+                },
+
+                err => this.notifier.error(err.message)
+              )
+          }
+        }
+      ]
+    ]
+  }
+
+  ngOnInit () {
+    this.initialize()
+
+    this.route.queryParams
+      .subscribe(params => {
+        this.search = params.search || ''
+
+        this.setTableFilter(this.search)
+        this.loadData()
+      })
+  }
+
+  ngAfterViewInit () {
+    if (this.search) this.setTableFilter(this.search)
+  }
+
+  getIdentifier () {
+    return 'AbuseListComponent'
+  }
+
+  openModerationCommentModal (abuse: Abuse) {
+    this.moderationCommentModal.openModal(abuse)
+  }
+
+  onModerationCommentUpdated () {
+    this.loadData()
+  }
+
+  /* Table filter functions */
+  onAbuseSearch (event: Event) {
+    this.onSearch(event)
+    this.setQueryParams((event.target as HTMLInputElement).value)
+  }
+
+  setQueryParams (search: string) {
+    const queryParams: Params = {}
+    if (search) Object.assign(queryParams, { search })
+
+    this.router.navigate([ '/admin/moderation/video-abuses/list' ], { queryParams })
+  }
+
+  resetTableFilter () {
+    this.setTableFilter('')
+    this.setQueryParams('')
+    this.resetSearch()
+  }
+  /* END Table filter functions */
+
+  isAbuseAccepted (abuse: Abuse) {
+    return abuse.state.id === AbuseState.ACCEPTED
+  }
+
+  isAbuseRejected (abuse: Abuse) {
+    return abuse.state.id === AbuseState.REJECTED
+  }
+
+  getVideoUrl (abuse: Abuse) {
+    return Video.buildClientUrl(abuse.video.uuid)
+  }
+
+  getVideoEmbed (abuse: Abuse) {
+    return buildVideoEmbed(
+      buildVideoLink({
+        baseUrl: `${environment.embedUrl}/videos/embed/${abuse.video.uuid}`,
+        title: false,
+        warningTitle: false,
+        startTime: abuse.startAt,
+        stopTime: abuse.endAt
+      })
+    )
+  }
+
+  switchToDefaultAvatar ($event: Event) {
+    ($event.target as HTMLImageElement).src = Actor.GET_DEFAULT_AVATAR_URL()
+  }
+
+  async removeAbuse (abuse: Abuse) {
+    const res = await this.confirmService.confirm(this.i18n('Do you really want to delete this abuse report?'), this.i18n('Delete'))
+    if (res === false) return
+
+    this.abuseService.removeAbuse(abuse).subscribe(
+      () => {
+        this.notifier.success(this.i18n('Abuse deleted.'))
+        this.loadData()
+      },
+
+      err => this.notifier.error(err.message)
+    )
+  }
+
+  updateAbuseState (abuse: Abuse, state: AbuseState) {
+    this.abuseService.updateAbuse(abuse, { state })
+      .subscribe(
+        () => this.loadData(),
+
+        err => this.notifier.error(err.message)
+      )
+  }
+
+  protected loadData () {
+    return this.abuseService.getAbuses({
+      pagination: this.pagination,
+      sort: this.sort,
+      search: this.search
+    }).subscribe(
+        async resultList => {
+          this.totalRecords = resultList.total
+          const abuses = []
+
+          for (const abuse of resultList.data) {
+            Object.assign(abuse, {
+              reasonHtml: await this.toHtml(abuse.reason),
+              moderationCommentHtml: await this.toHtml(abuse.moderationComment),
+              embedHtml: this.sanitizer.bypassSecurityTrustHtml(this.getVideoEmbed(abuse)),
+              reporterAccount: new Account(abuse.reporterAccount)
+            })
+
+            if (abuse.video.channel?.ownerAccount) abuse.video.channel.ownerAccount = new Account(abuse.video.channel.ownerAccount)
+            if (abuse.updatedAt === abuse.createdAt) delete abuse.updatedAt
+
+            abuses.push(abuse as ProcessedAbuse)
+          }
+
+          this.abuses = abuses
+        },
+
+        err => this.notifier.error(err.message)
+      )
+  }
+
+  private toHtml (text: string) {
+    return this.markdownRenderer.textMarkdownToHTML(text)
+  }
+}
diff --git a/client/src/app/+admin/moderation/abuse-list/index.ts b/client/src/app/+admin/moderation/abuse-list/index.ts
new file mode 100644
index 000000000..c6037dab4
--- /dev/null
+++ b/client/src/app/+admin/moderation/abuse-list/index.ts
@@ -0,0 +1,3 @@
+export * from './abuse-details.component'
+export * from './abuse-list.component'
+export * from './moderation-comment-modal.component'
diff --git a/client/src/app/+admin/moderation/abuse-list/moderation-comment-modal.component.html b/client/src/app/+admin/moderation/abuse-list/moderation-comment-modal.component.html
new file mode 100644
index 000000000..8082e93f4
--- /dev/null
+++ b/client/src/app/+admin/moderation/abuse-list/moderation-comment-modal.component.html
@@ -0,0 +1,38 @@
+<ng-template #modal>
+  <div class="modal-header">
+    <h4 i18n class="modal-title">Moderation comment</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)="banUser()">
+      <div class="form-group">
+        <textarea
+          formControlName="moderationComment" ngbAutofocus i18-placeholder placeholder="Comment this report…"
+          [ngClass]="{ 'input-error': formErrors['moderationComment'] }" class="form-control">
+        </textarea>
+        <div *ngIf="formErrors.moderationComment" class="form-error">
+          {{ formErrors.moderationComment }}
+        </div>
+      </div>
+
+      <div class="form-group" i18n>
+        This comment can only be seen by you or the other moderators.
+      </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="Update this comment" class="action-button-submit"
+          [disabled]="!form.valid"
+        >
+      </div>
+    </form>
+  </div>
+
+</ng-template>
diff --git a/client/src/app/+admin/moderation/abuse-list/moderation-comment-modal.component.scss b/client/src/app/+admin/moderation/abuse-list/moderation-comment-modal.component.scss
new file mode 100644
index 000000000..afcdb9a16
--- /dev/null
+++ b/client/src/app/+admin/moderation/abuse-list/moderation-comment-modal.component.scss
@@ -0,0 +1,6 @@
+@import 'variables';
+@import 'mixins';
+
+textarea {
+  @include peertube-textarea(100%, 100px);
+}
diff --git a/client/src/app/+admin/moderation/abuse-list/moderation-comment-modal.component.ts b/client/src/app/+admin/moderation/abuse-list/moderation-comment-modal.component.ts
new file mode 100644
index 000000000..23738f9cd
--- /dev/null
+++ b/client/src/app/+admin/moderation/abuse-list/moderation-comment-modal.component.ts
@@ -0,0 +1,70 @@
+import { Component, EventEmitter, OnInit, Output, ViewChild } from '@angular/core'
+import { Notifier } from '@app/core'
+import { FormReactive, FormValidatorService, AbuseValidatorsService } from '@app/shared/shared-forms'
+import { AbuseService } from '@app/shared/shared-moderation'
+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 { Abuse } from '@shared/models'
+
+@Component({
+  selector: 'my-moderation-comment-modal',
+  templateUrl: './moderation-comment-modal.component.html',
+  styleUrls: [ './moderation-comment-modal.component.scss' ]
+})
+export class ModerationCommentModalComponent extends FormReactive implements OnInit {
+  @ViewChild('modal', { static: true }) modal: NgbModal
+  @Output() commentUpdated = new EventEmitter<string>()
+
+  private abuseToComment: Abuse
+  private openedModal: NgbModalRef
+
+  constructor (
+    protected formValidatorService: FormValidatorService,
+    private modalService: NgbModal,
+    private notifier: Notifier,
+    private abuseService: AbuseService,
+    private abuseValidatorsService: AbuseValidatorsService,
+    private i18n: I18n
+  ) {
+    super()
+  }
+
+  ngOnInit () {
+    this.buildForm({
+      moderationComment: this.abuseValidatorsService.ABUSE_MODERATION_COMMENT
+    })
+  }
+
+  openModal (abuseToComment: Abuse) {
+    this.abuseToComment = abuseToComment
+    this.openedModal = this.modalService.open(this.modal, { centered: true })
+
+    this.form.patchValue({
+      moderationComment: this.abuseToComment.moderationComment
+    })
+  }
+
+  hide () {
+    this.abuseToComment = undefined
+    this.openedModal.close()
+    this.form.reset()
+  }
+
+  async banUser () {
+    const moderationComment: string = this.form.value[ 'moderationComment' ]
+
+    this.abuseService.updateAbuse(this.abuseToComment, { moderationComment })
+        .subscribe(
+          () => {
+            this.notifier.success(this.i18n('Comment updated.'))
+
+            this.commentUpdated.emit(moderationComment)
+            this.hide()
+          },
+
+          err => this.notifier.error(err.message)
+        )
+  }
+
+}