Use 3 tables to represent abuses

13 files changed, 223 insertions, 216 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/video-abuse-list/video-abuse-details.component.ts b/client/src/app/+admin/moderation/abuse-list/abuse-details.component.ts
index 5db2887fa..8f87630b8 100644
--- a/client/src/app/+admin/moderation/video-abuse-list/video-abuse-details.component.ts
+++ b/client/src/app/+admin/moderation/abuse-list/abuse-details.component.ts
@@ -1,19 +1,19 @@
 import { Component, Input } from '@angular/core'
 import { Actor } from '@app/shared/shared-main'
 import { I18n } from '@ngx-translate/i18n-polyfill'
-import { VideoAbusePredefinedReasonsString } from '../../../../../../shared/models/videos/abuse/video-abuse-reason.model'
-import { ProcessedVideoAbuse } from './video-abuse-list.component'
+import { AbusePredefinedReasonsString } from '@shared/models'
+import { ProcessedAbuse } from './abuse-list.component'
 import { durationToString } from '@app/helpers'
 
 @Component({
-  selector: 'my-video-abuse-details',
-  templateUrl: './video-abuse-details.component.html',
+  selector: 'my-abuse-details',
+  templateUrl: './abuse-details.component.html',
   styleUrls: [ '../moderation.component.scss' ]
 })
-export class VideoAbuseDetailsComponent {
-  @Input() videoAbuse: ProcessedVideoAbuse
+export class AbuseDetailsComponent {
+  @Input() abuse: ProcessedAbuse
 
-  private predefinedReasonsTranslations: { [key in VideoAbusePredefinedReasonsString]: string }
+  private predefinedReasonsTranslations: { [key in AbusePredefinedReasonsString]: string }
 
   constructor (
     private i18n: I18n
@@ -31,16 +31,16 @@ export class VideoAbuseDetailsComponent {
   }
 
   get startAt () {
-    return durationToString(this.videoAbuse.startAt)
+    return durationToString(this.abuse.startAt)
   }
 
   get endAt () {
-    return durationToString(this.videoAbuse.endAt)
+    return durationToString(this.abuse.endAt)
   }
 
   getPredefinedReasons () {
-    if (!this.videoAbuse.predefinedReasons) return []
-    return this.videoAbuse.predefinedReasons.map(r => ({
+    if (!this.abuse.predefinedReasons) return []
+    return this.abuse.predefinedReasons.map(r => ({
       id: r,
       label: this.predefinedReasonsTranslations[r]
     }))
diff --git a/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.html b/client/src/app/+admin/moderation/abuse-list/abuse-list.component.html
index 64641b28a..167f32fe6 100644
--- a/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.html
+++ b/client/src/app/+admin/moderation/abuse-list/abuse-list.component.html
@@ -1,5 +1,5 @@
 <p-table
-  [value]="videoAbuses" [lazy]="true" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [rowsPerPageOptions]="rowsPerPageOptions"
+  [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"
@@ -16,11 +16,11 @@
 
             <div role="menu" ngbDropdownMenu>
               <h6 class="dropdown-header" i18n>Advanced report filters</h6>
-              <a [routerLink]="[ '/admin/moderation/video-abuses/list' ]" [queryParams]="{ 'search': 'state:pending' }" class="dropdown-item" i18n>Unsolved reports</a>
-              <a [routerLink]="[ '/admin/moderation/video-abuses/list' ]" [queryParams]="{ 'search': 'state:accepted' }" class="dropdown-item" i18n>Accepted reports</a>
-              <a [routerLink]="[ '/admin/moderation/video-abuses/list' ]" [queryParams]="{ 'search': 'state:rejected' }" class="dropdown-item" i18n>Refused reports</a>
-              <a [routerLink]="[ '/admin/moderation/video-abuses/list' ]" [queryParams]="{ 'search': 'videoIs:blacklisted' }" class="dropdown-item" i18n>Reports with blocked videos</a>
-              <a [routerLink]="[ '/admin/moderation/video-abuses/list' ]" [queryParams]="{ 'search': 'videoIs:deleted' }" class="dropdown-item" i18n>Reports with deleted videos</a>
+              <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
@@ -45,91 +45,91 @@
     </tr>
   </ng-template>
 
-  <ng-template pTemplate="body" let-expanded="expanded" let-videoAbuse>
+  <ng-template pTemplate="body" let-expanded="expanded" let-abuse>
     <tr>
-      <td class="c-hand" [pRowToggler]="videoAbuse" i18n-ngbTooltip ngbTooltip="More information" placement="top-left" container="body">
+      <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]="videoAbuse.reporterAccount.url" i18n-title title="Open account in a new tab" target="_blank" rel="noopener noreferrer">
+        <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]="videoAbuse.reporterAccount.avatar?.path"
+              [src]="abuse.reporterAccount.avatar?.path"
               (error)="switchToDefaultAvatar($event)"
               alt="Avatar"
             >
             <div>
-              {{ videoAbuse.reporterAccount.displayName }}
-              <span class="text-muted">{{ videoAbuse.reporterAccount.nameWithHost }}</span>
+              {{ abuse.reporterAccount.displayName }}
+              <span class="text-muted">{{ abuse.reporterAccount.nameWithHost }}</span>
             </div>
           </div>
         </a>
       </td>
 
-      <td *ngIf="!videoAbuse.video.deleted">
-        <a [href]="getVideoUrl(videoAbuse)" class="video-table-video-link" [title]="videoAbuse.video.name" target="_blank" rel="noopener noreferrer">
+      <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]="videoAbuse.video.thumbnailPath">
+              <img [src]="abuse.video.thumbnailPath">
               <span
-                class="video-table-video-image-label" *ngIf="videoAbuse.count > 1"
+                class="video-table-video-image-label" *ngIf="abuse.count > 1"
                 i18n-title title="This video has been reported multiple times."
               >
-                {{ videoAbuse.nth }}/{{ videoAbuse.count }}
+                {{ abuse.nth }}/{{ abuse.count }}
               </span>
             </div>
             <div class="video-table-video-text">
               <div>
-                <span *ngIf="!videoAbuse.video.blacklisted" class="glyphicon glyphicon-new-window"></span>
-                <span *ngIf="videoAbuse.video.blacklisted" i18n-title title="The video was blocked" class="glyphicon glyphicon-ban-circle"></span>
-                {{ videoAbuse.video.name }}
+                <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 {{ videoAbuse.video.channel?.displayName }} on {{ videoAbuse.video.channel?.host }} </div>
+              <div class="text-muted" i18n>by {{ abuse.video.channel?.displayName }} on {{ abuse.video.channel?.host }} </div>
             </div>
           </div>
         </a>
       </td>
 
-      <td *ngIf="videoAbuse.video.deleted" class="c-hand" [pRowToggler]="videoAbuse">
+      <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>
-              {{ videoAbuse.video.name }}
+              {{ abuse.video.name }}
               <span class="glyphicon glyphicon-trash"></span>
             </div>
-            <div class="text-muted" i18n>by {{ videoAbuse.video.channel?.displayName }} on {{ videoAbuse.video.channel?.host }} </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]="videoAbuse">{{ videoAbuse.createdAt | date: 'short'  }}</td>
+      <td class="c-hand" [pRowToggler]="abuse">{{ abuse.createdAt | date: 'short'  }}</td>
 
-      <td class="c-hand video-abuse-states" [pRowToggler]="videoAbuse">
-        <span *ngIf="isVideoAbuseAccepted(videoAbuse)" [title]="videoAbuse.state.label" class="glyphicon glyphicon-ok"></span>
-        <span *ngIf="isVideoAbuseRejected(videoAbuse)" [title]="videoAbuse.state.label" class="glyphicon glyphicon-remove"></span>
-        <span *ngIf="videoAbuse.moderationComment" container="body" placement="left auto" [ngbTooltip]="videoAbuse.moderationComment" class="glyphicon glyphicon-comment"></span>
+      <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]="videoAbuseActions" [entry]="videoAbuse"
+          i18n-label label="Actions" [actions]="abuseActions" [entry]="abuse"
         ></my-action-dropdown>
       </td>
     </tr>
   </ng-template>
 
-  <ng-template pTemplate="rowexpansion" let-videoAbuse>
+  <ng-template pTemplate="rowexpansion" let-abuse>
       <tr>
         <td class="expand-cell" colspan="6">
-          <my-video-abuse-details [videoAbuse]="videoAbuse"></my-video-abuse-details>
+          <my-abuse-details [abuse]="abuse"></my-abuse-details>
         </td>
       </tr>
   </ng-template>
diff --git a/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.scss b/client/src/app/+admin/moderation/abuse-list/abuse-list.component.scss
index 8eee15b64..8eee15b64 100644
--- a/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.scss
+++ b/client/src/app/+admin/moderation/abuse-list/abuse-list.component.scss
diff --git a/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.ts b/client/src/app/+admin/moderation/abuse-list/abuse-list.component.ts
index 409dd42c7..427ec4d5d 100644
--- a/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.ts
+++ b/client/src/app/+admin/moderation/abuse-list/abuse-list.component.ts
@@ -1,5 +1,4 @@
 import { SortMeta } from 'primeng/api'
-import { filter } from 'rxjs/operators'
 import { buildVideoEmbed, buildVideoLink } from 'src/assets/player/utils'
 import { environment } from 'src/environments/environment'
 import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core'
@@ -7,43 +6,45 @@ 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 { BlocklistService, VideoAbuseService, VideoBlockService } from '@app/shared/shared-moderation'
+import { AbuseService, BlocklistService, VideoBlockService } from '@app/shared/shared-moderation'
 import { I18n } from '@ngx-translate/i18n-polyfill'
-import { VideoAbuse, VideoAbuseState } from '@shared/models'
+import { Abuse, AbuseState } from '@shared/models'
 import { ModerationCommentModalComponent } from './moderation-comment-modal.component'
 
-export type ProcessedVideoAbuse = VideoAbuse & {
+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: VideoAbuse['video'] & {
-    channel: VideoAbuse['video']['channel'] & {
+
+  video: Abuse['video'] & {
+    channel: Abuse['video']['channel'] & {
       ownerAccount: Account
     }
   }
 }
 
 @Component({
-  selector: 'my-video-abuse-list',
-  templateUrl: './video-abuse-list.component.html',
-  styleUrls: [ '../moderation.component.scss', './video-abuse-list.component.scss' ]
+  selector: 'my-abuse-list',
+  templateUrl: './abuse-list.component.html',
+  styleUrls: [ '../moderation.component.scss', './abuse-list.component.scss' ]
 })
-export class VideoAbuseListComponent extends RestTable implements OnInit, AfterViewInit {
+export class AbuseListComponent extends RestTable implements OnInit, AfterViewInit {
   @ViewChild('moderationCommentModal', { static: true }) moderationCommentModal: ModerationCommentModalComponent
 
-  videoAbuses: ProcessedVideoAbuse[] = []
+  abuses: ProcessedAbuse[] = []
   totalRecords = 0
   sort: SortMeta = { field: 'createdAt', order: 1 }
   pagination: RestPagination = { count: this.rowsPerPage, start: 0 }
 
-  videoAbuseActions: DropdownAction<VideoAbuse>[][] = []
+  abuseActions: DropdownAction<Abuse>[][] = []
 
   constructor (
     private notifier: Notifier,
-    private videoAbuseService: VideoAbuseService,
+    private abuseService: AbuseService,
     private blocklistService: BlocklistService,
     private videoService: VideoService,
     private videoBlocklistService: VideoBlockService,
@@ -56,7 +57,7 @@ export class VideoAbuseListComponent extends RestTable implements OnInit, AfterV
   ) {
     super()
 
-    this.videoAbuseActions = [
+    this.abuseActions = [
       [
         {
           label: this.i18n('Internal actions'),
@@ -64,45 +65,45 @@ export class VideoAbuseListComponent extends RestTable implements OnInit, AfterV
         },
         {
           label: this.i18n('Delete report'),
-          handler: videoAbuse => this.removeVideoAbuse(videoAbuse)
+          handler: abuse => this.removeAbuse(abuse)
         },
         {
           label: this.i18n('Add note'),
-          handler: videoAbuse => this.openModerationCommentModal(videoAbuse),
-          isDisplayed: videoAbuse => !videoAbuse.moderationComment
+          handler: abuse => this.openModerationCommentModal(abuse),
+          isDisplayed: abuse => !abuse.moderationComment
         },
         {
           label: this.i18n('Update note'),
-          handler: videoAbuse => this.openModerationCommentModal(videoAbuse),
-          isDisplayed: videoAbuse => !!videoAbuse.moderationComment
+          handler: abuse => this.openModerationCommentModal(abuse),
+          isDisplayed: abuse => !!abuse.moderationComment
         },
         {
           label: this.i18n('Mark as accepted'),
-          handler: videoAbuse => this.updateVideoAbuseState(videoAbuse, VideoAbuseState.ACCEPTED),
-          isDisplayed: videoAbuse => !this.isVideoAbuseAccepted(videoAbuse)
+          handler: abuse => this.updateAbuseState(abuse, AbuseState.ACCEPTED),
+          isDisplayed: abuse => !this.isAbuseAccepted(abuse)
         },
         {
           label: this.i18n('Mark as rejected'),
-          handler: videoAbuse => this.updateVideoAbuseState(videoAbuse, VideoAbuseState.REJECTED),
-          isDisplayed: videoAbuse => !this.isVideoAbuseRejected(videoAbuse)
+          handler: abuse => this.updateAbuseState(abuse, AbuseState.REJECTED),
+          isDisplayed: abuse => !this.isAbuseRejected(abuse)
         }
       ],
       [
         {
           label: this.i18n('Actions for the video'),
           isHeader: true,
-          isDisplayed: videoAbuse => !videoAbuse.video.deleted
+          isDisplayed: abuse => !abuse.video.deleted
         },
         {
           label: this.i18n('Block video'),
-          isDisplayed: videoAbuse => !videoAbuse.video.deleted && !videoAbuse.video.blacklisted,
-          handler: videoAbuse => {
-            this.videoBlocklistService.blockVideo(videoAbuse.video.id, undefined, true)
+          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.updateVideoAbuseState(videoAbuse, VideoAbuseState.ACCEPTED)
+                  this.updateAbuseState(abuse, AbuseState.ACCEPTED)
                 },
 
                 err => this.notifier.error(err.message)
@@ -111,14 +112,14 @@ export class VideoAbuseListComponent extends RestTable implements OnInit, AfterV
         },
         {
           label: this.i18n('Unblock video'),
-          isDisplayed: videoAbuse => !videoAbuse.video.deleted && videoAbuse.video.blacklisted,
-          handler: videoAbuse => {
-            this.videoBlocklistService.unblockVideo(videoAbuse.video.id)
+          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.updateVideoAbuseState(videoAbuse, VideoAbuseState.ACCEPTED)
+                  this.updateAbuseState(abuse, AbuseState.ACCEPTED)
                 },
 
                 err => this.notifier.error(err.message)
@@ -127,20 +128,20 @@ export class VideoAbuseListComponent extends RestTable implements OnInit, AfterV
         },
         {
           label: this.i18n('Delete video'),
-          isDisplayed: videoAbuse => !videoAbuse.video.deleted,
-          handler: async videoAbuse => {
+          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(videoAbuse.video.id)
+            this.videoService.removeVideo(abuse.video.id)
               .subscribe(
                 () => {
                   this.notifier.success(this.i18n('Video deleted.'))
 
-                  this.updateVideoAbuseState(videoAbuse, VideoAbuseState.ACCEPTED)
+                  this.updateAbuseState(abuse, AbuseState.ACCEPTED)
                 },
 
                 err => this.notifier.error(err.message)
@@ -155,8 +156,8 @@ export class VideoAbuseListComponent extends RestTable implements OnInit, AfterV
         },
         {
           label: this.i18n('Mute reporter'),
-          handler: async videoAbuse => {
-            const account = videoAbuse.reporterAccount as Account
+          handler: async abuse => {
+            const account = abuse.reporterAccount as Account
 
             this.blocklistService.blockAccountByInstance(account)
               .subscribe(
@@ -174,13 +175,13 @@ export class VideoAbuseListComponent extends RestTable implements OnInit, AfterV
         },
         {
           label: this.i18n('Mute server'),
-          isDisplayed: videoAbuse => !videoAbuse.reporterAccount.userId,
-          handler: async videoAbuse => {
-            this.blocklistService.blockServerByInstance(videoAbuse.reporterAccount.host)
+          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: videoAbuse.reporterAccount.host })
+                    this.i18n('Server {{host}} muted by the instance.', { host: abuse.reporterAccount.host })
                   )
                 },
 
@@ -209,11 +210,11 @@ export class VideoAbuseListComponent extends RestTable implements OnInit, AfterV
   }
 
   getIdentifier () {
-    return 'VideoAbuseListComponent'
+    return 'AbuseListComponent'
   }
 
-  openModerationCommentModal (videoAbuse: VideoAbuse) {
-    this.moderationCommentModal.openModal(videoAbuse)
+  openModerationCommentModal (abuse: Abuse) {
+    this.moderationCommentModal.openModal(abuse)
   }
 
   onModerationCommentUpdated () {
@@ -240,26 +241,26 @@ export class VideoAbuseListComponent extends RestTable implements OnInit, AfterV
   }
   /* END Table filter functions */
 
-  isVideoAbuseAccepted (videoAbuse: VideoAbuse) {
-    return videoAbuse.state.id === VideoAbuseState.ACCEPTED
+  isAbuseAccepted (abuse: Abuse) {
+    return abuse.state.id === AbuseState.ACCEPTED
   }
 
-  isVideoAbuseRejected (videoAbuse: VideoAbuse) {
-    return videoAbuse.state.id === VideoAbuseState.REJECTED
+  isAbuseRejected (abuse: Abuse) {
+    return abuse.state.id === AbuseState.REJECTED
   }
 
-  getVideoUrl (videoAbuse: VideoAbuse) {
-    return Video.buildClientUrl(videoAbuse.video.uuid)
+  getVideoUrl (abuse: Abuse) {
+    return Video.buildClientUrl(abuse.video.uuid)
   }
 
-  getVideoEmbed (videoAbuse: VideoAbuse) {
+  getVideoEmbed (abuse: Abuse) {
     return buildVideoEmbed(
       buildVideoLink({
-        baseUrl: `${environment.embedUrl}/videos/embed/${videoAbuse.video.uuid}`,
+        baseUrl: `${environment.embedUrl}/videos/embed/${abuse.video.uuid}`,
         title: false,
         warningTitle: false,
-        startTime: videoAbuse.startAt,
-        stopTime: videoAbuse.endAt
+        startTime: abuse.startAt,
+        stopTime: abuse.endAt
       })
     )
   }
@@ -268,11 +269,11 @@ export class VideoAbuseListComponent extends RestTable implements OnInit, AfterV
     ($event.target as HTMLImageElement).src = Actor.GET_DEFAULT_AVATAR_URL()
   }
 
-  async removeVideoAbuse (videoAbuse: VideoAbuse) {
+  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.videoAbuseService.removeVideoAbuse(videoAbuse).subscribe(
+    this.abuseService.removeAbuse(abuse).subscribe(
       () => {
         this.notifier.success(this.i18n('Abuse deleted.'))
         this.loadData()
@@ -282,8 +283,8 @@ export class VideoAbuseListComponent extends RestTable implements OnInit, AfterV
     )
   }
 
-  updateVideoAbuseState (videoAbuse: VideoAbuse, state: VideoAbuseState) {
-    this.videoAbuseService.updateVideoAbuse(videoAbuse, { state })
+  updateAbuseState (abuse: Abuse, state: AbuseState) {
+    this.abuseService.updateAbuse(abuse, { state })
       .subscribe(
         () => this.loadData(),
 
@@ -292,14 +293,14 @@ export class VideoAbuseListComponent extends RestTable implements OnInit, AfterV
   }
 
   protected loadData () {
-    return this.videoAbuseService.getVideoAbuses({
+    return this.abuseService.getAbuses({
       pagination: this.pagination,
       sort: this.sort,
       search: this.search
     }).subscribe(
         async resultList => {
           this.totalRecords = resultList.total
-          const videoAbuses = []
+          const abuses = []
 
           for (const abuse of resultList.data) {
             Object.assign(abuse, {
@@ -312,10 +313,10 @@ export class VideoAbuseListComponent extends RestTable implements OnInit, AfterV
             if (abuse.video.channel?.ownerAccount) abuse.video.channel.ownerAccount = new Account(abuse.video.channel.ownerAccount)
             if (abuse.updatedAt === abuse.createdAt) delete abuse.updatedAt
 
-            videoAbuses.push(abuse as ProcessedVideoAbuse)
+            abuses.push(abuse as ProcessedAbuse)
           }
 
-          this.videoAbuses = videoAbuses
+          this.abuses = abuses
         },
 
         err => this.notifier.error(err.message)
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/video-abuse-list/moderation-comment-modal.component.html b/client/src/app/+admin/moderation/abuse-list/moderation-comment-modal.component.html
index 8082e93f4..8082e93f4 100644
--- a/client/src/app/+admin/moderation/video-abuse-list/moderation-comment-modal.component.html
+++ b/client/src/app/+admin/moderation/abuse-list/moderation-comment-modal.component.html
diff --git a/client/src/app/+admin/moderation/video-abuse-list/moderation-comment-modal.component.scss b/client/src/app/+admin/moderation/abuse-list/moderation-comment-modal.component.scss
index afcdb9a16..afcdb9a16 100644
--- a/client/src/app/+admin/moderation/video-abuse-list/moderation-comment-modal.component.scss
+++ b/client/src/app/+admin/moderation/abuse-list/moderation-comment-modal.component.scss
diff --git a/client/src/app/+admin/moderation/video-abuse-list/moderation-comment-modal.component.ts b/client/src/app/+admin/moderation/abuse-list/moderation-comment-modal.component.ts
index 3cd763ca4..23738f9cd 100644
--- a/client/src/app/+admin/moderation/video-abuse-list/moderation-comment-modal.component.ts
+++ b/client/src/app/+admin/moderation/abuse-list/moderation-comment-modal.component.ts
@@ -1,11 +1,11 @@
 import { Component, EventEmitter, OnInit, Output, ViewChild } from '@angular/core'
 import { Notifier } from '@app/core'
-import { FormReactive, FormValidatorService, VideoAbuseValidatorsService } from '@app/shared/shared-forms'
-import { VideoAbuseService } from '@app/shared/shared-moderation'
+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 { VideoAbuse } from '@shared/models'
+import { Abuse } from '@shared/models'
 
 @Component({
   selector: 'my-moderation-comment-modal',
@@ -16,15 +16,15 @@ export class ModerationCommentModalComponent extends FormReactive implements OnI
   @ViewChild('modal', { static: true }) modal: NgbModal
   @Output() commentUpdated = new EventEmitter<string>()
 
-  private abuseToComment: VideoAbuse
+  private abuseToComment: Abuse
   private openedModal: NgbModalRef
 
   constructor (
     protected formValidatorService: FormValidatorService,
     private modalService: NgbModal,
     private notifier: Notifier,
-    private videoAbuseService: VideoAbuseService,
-    private videoAbuseValidatorsService: VideoAbuseValidatorsService,
+    private abuseService: AbuseService,
+    private abuseValidatorsService: AbuseValidatorsService,
     private i18n: I18n
   ) {
     super()
@@ -32,11 +32,11 @@ export class ModerationCommentModalComponent extends FormReactive implements OnI
 
   ngOnInit () {
     this.buildForm({
-      moderationComment: this.videoAbuseValidatorsService.VIDEO_ABUSE_MODERATION_COMMENT
+      moderationComment: this.abuseValidatorsService.ABUSE_MODERATION_COMMENT
     })
   }
 
-  openModal (abuseToComment: VideoAbuse) {
+  openModal (abuseToComment: Abuse) {
     this.abuseToComment = abuseToComment
     this.openedModal = this.modalService.open(this.modal, { centered: true })
 
@@ -54,7 +54,7 @@ export class ModerationCommentModalComponent extends FormReactive implements OnI
   async banUser () {
     const moderationComment: string = this.form.value[ 'moderationComment' ]
 
-    this.videoAbuseService.updateVideoAbuse(this.abuseToComment, { moderationComment })
+    this.abuseService.updateAbuse(this.abuseToComment, { moderationComment })
         .subscribe(
           () => {
             this.notifier.success(this.i18n('Comment updated.'))
diff --git a/client/src/app/+admin/moderation/index.ts b/client/src/app/+admin/moderation/index.ts
index 16249236c..53e4bc991 100644
--- a/client/src/app/+admin/moderation/index.ts
+++ b/client/src/app/+admin/moderation/index.ts
@@ -1,5 +1,5 @@
+export * from './abuse-list'
 export * from './instance-blocklist'
-export * from './video-abuse-list'
 export * from './video-block-list'
 export * from './moderation.component'
 export * from './moderation.routes'
diff --git a/client/src/app/+admin/moderation/moderation.routes.ts b/client/src/app/+admin/moderation/moderation.routes.ts
index cd837bcb9..1e207e5e8 100644
--- a/client/src/app/+admin/moderation/moderation.routes.ts
+++ b/client/src/app/+admin/moderation/moderation.routes.ts
@@ -1,7 +1,7 @@
 import { Routes } from '@angular/router'
 import { InstanceAccountBlocklistComponent, InstanceServerBlocklistComponent } from '@app/+admin/moderation/instance-blocklist'
 import { ModerationComponent } from '@app/+admin/moderation/moderation.component'
-import { VideoAbuseListComponent } from '@app/+admin/moderation/video-abuse-list'
+import { AbuseListComponent } from '@app/+admin/moderation/abuse-list'
 import { VideoBlockListComponent } from '@app/+admin/moderation/video-block-list'
 import { UserRightGuard } from '@app/core'
 import { UserRight } from '@shared/models'
@@ -13,20 +13,25 @@ export const ModerationRoutes: Routes = [
     children: [
       {
         path: '',
-        redirectTo: 'video-abuses/list',
+        redirectTo: 'abuses/list',
         pathMatch: 'full'
       },
       {
         path: 'video-abuses',
-        redirectTo: 'video-abuses/list',
+        redirectTo: 'abuses/list',
         pathMatch: 'full'
       },
       {
         path: 'video-abuses/list',
-        component: VideoAbuseListComponent,
+        redirectTo: 'abuses/list',
+        pathMatch: 'full'
+      },
+      {
+        path: 'abuses/list',
+        component: AbuseListComponent,
         canActivate: [ UserRightGuard ],
         data: {
-          userRight: UserRight.MANAGE_VIDEO_ABUSES,
+          userRight: UserRight.MANAGE_ABUSES,
           meta: {
             title: 'Video reports'
           }
diff --git a/client/src/app/+admin/moderation/video-abuse-list/index.ts b/client/src/app/+admin/moderation/video-abuse-list/index.ts
deleted file mode 100644
index da7176e52..000000000
--- a/client/src/app/+admin/moderation/video-abuse-list/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './video-abuse-list.component'
-export * from './moderation-comment-modal.component'
diff --git a/client/src/app/+admin/moderation/video-abuse-list/video-abuse-details.component.html b/client/src/app/+admin/moderation/video-abuse-list/video-abuse-details.component.html
deleted file mode 100644
index ec808cdb8..000000000
--- a/client/src/app/+admin/moderation/video-abuse-list/video-abuse-details.component.html
+++ /dev/null
@@ -1,93 +0,0 @@
-<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/video-abuses/list' ]" [queryParams]="{ 'search': 'reporter:&quot;' + videoAbuse.reporterAccount.displayName + '&quot;' }" class="chip">
-          <img
-            class="avatar"
-            [src]="videoAbuse.reporterAccount.avatar?.path"
-            (error)="switchToDefaultAvatar($event)"
-            alt="Avatar"
-          >
-          <div>
-            <span class="text-muted">{{ videoAbuse.reporterAccount.nameWithHost }}</span>
-          </div>
-        </a>
-        <a [routerLink]="[ '/admin/moderation/video-abuses/list' ]" [queryParams]="{ 'search': 'reporter:&quot;' + videoAbuse.reporterAccount.displayName + '&quot;' }" class="ml-auto text-muted video-details-links" i18n>
-          {videoAbuse.countReportsForReporter, plural, =1 {1 report} other {{{ videoAbuse.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/video-abuses/list' ]" [queryParams]="{ 'search': 'reportee:&quot;' +videoAbuse.video.channel.ownerAccount.displayName + '&quot;' }" class="chip">
-          <img
-            class="avatar"
-            [src]="videoAbuse.video.channel.ownerAccount?.avatar?.path"
-            (error)="switchToDefaultAvatar($event)"
-            alt="Avatar"
-          >
-          <div>
-            <span class="text-muted">{{ videoAbuse.video.channel.ownerAccount ? videoAbuse.video.channel.ownerAccount.nameWithHost : '' }}</span>
-          </div>
-        </a>
-        <a [routerLink]="[ '/admin/moderation/video-abuses/list' ]" [queryParams]="{ 'search': 'reportee:&quot;' +videoAbuse.video.channel.ownerAccount.displayName + '&quot;' }" class="ml-auto text-muted video-details-links" i18n>
-          {videoAbuse.countReportsForReportee, plural, =1 {1 report} other {{{ videoAbuse.countReportsForReportee }} reports}}<span class="ml-1 glyphicon glyphicon-flag"></span>
-        </a>
-      </span>
-    </div>
-
-    <div class="d-flex" *ngIf="videoAbuse.updatedAt">
-      <span class="col-3 moderation-expanded-label" i18n>Updated</span>
-      <time class="col-9 moderation-expanded-text video-details-date-updated">{{ videoAbuse.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/video-abuses/list' ]" [queryParams]="{ 'search': '#' + videoAbuse.id  }" class="ml-1 text-muted">#{{ videoAbuse.id }}</a>
-      </span>
-      <span class="col-9 moderation-expanded-text" [innerHTML]="videoAbuse.reasonHtml"></span>
-    </div>
-
-    <div *ngIf="getPredefinedReasons()" class="mt-2 d-flex">
-      <span class="col-3"></span>
-      <span class="col-9">
-        <a [routerLink]="[ '/admin/moderation/video-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="videoAbuse.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="videoAbuse.endAt"> - {{ endAt }}</ng-container>
-      </span>
-    </div>
-
-    <div class="mt-3 d-flex" *ngIf="videoAbuse.moderationComment">
-      <span class="col-3 moderation-expanded-label" i18n>Note</span>
-      <span class="col-9 moderation-expanded-text" [innerHTML]="videoAbuse.moderationCommentHtml"></span>
-    </div>
-
-  </div>
-
-  <!-- report right part (video details) -->
-  <div class="col-4">
-    <div class="screenratio">
-      <div *ngIf="videoAbuse.video.deleted || videoAbuse.video.blacklisted">
-        <span i18n *ngIf="videoAbuse.video.deleted">The video was deleted</span>
-        <span i18n *ngIf="!videoAbuse.video.deleted">The video was blocked</span>
-      </div>
-      <div *ngIf="!videoAbuse.video.deleted && !videoAbuse.video.blacklisted" [innerHTML]="videoAbuse.embedHtml"></div>
-    </div>
-  </div>
-</div>