Increase rows per page, add reporter muting for abuse list

9 files changed, 78 insertions, 14 deletions

diff --git a/client/src/app/+admin/moderation/instance-blocklist/instance-account-blocklist.component.html b/client/src/app/+admin/moderation/instance-blocklist/instance-account-blocklist.component.html
index e40c29abf..6d77c8290 100644
--- a/client/src/app/+admin/moderation/instance-blocklist/instance-account-blocklist.component.html
+++ b/client/src/app/+admin/moderation/instance-blocklist/instance-account-blocklist.component.html
@@ -8,7 +8,7 @@
   <ng-template pTemplate="header">
     <tr>
       <th i18n>Account</th>
-      <th style="width: 200px;" i18n pSortableColumn="createdAt">Muted at <p-sortIcon field="createdAt"></p-sortIcon></th>
+      <th style="width: 190px;" i18n pSortableColumn="createdAt">Muted at <p-sortIcon field="createdAt"></p-sortIcon></th>
       <th style="width: 100px;"></th> <!-- column for action buttons --> 
     </tr>
   </ng-template>
diff --git a/client/src/app/+admin/moderation/instance-blocklist/instance-server-blocklist.component.html b/client/src/app/+admin/moderation/instance-blocklist/instance-server-blocklist.component.html
index bf5c00918..075be8498 100644
--- a/client/src/app/+admin/moderation/instance-blocklist/instance-server-blocklist.component.html
+++ b/client/src/app/+admin/moderation/instance-blocklist/instance-server-blocklist.component.html
@@ -16,7 +16,7 @@
   <ng-template pTemplate="header">
     <tr>
       <th i18n>Instance</th>
-      <th style="width: 200px;" i18n pSortableColumn="createdAt">Muted at <p-sortIcon field="createdAt"></p-sortIcon></th>
+      <th style="width: 190px;" i18n pSortableColumn="createdAt">Muted at <p-sortIcon field="createdAt"></p-sortIcon></th>
       <th style="width: 100px;"></th> <!-- column for action buttons -->
     </tr>
   </ng-template>
diff --git a/client/src/app/+admin/moderation/moderation.component.scss b/client/src/app/+admin/moderation/moderation.component.scss
index 9af76d2dd..a015b6d85 100644
--- a/client/src/app/+admin/moderation/moderation.component.scss
+++ b/client/src/app/+admin/moderation/moderation.component.scss
@@ -29,6 +29,10 @@
   }
 }
 
+.glyphicon-trash {
+  font-size: 80%;
+}
+
 .screenratio {
   position: relative;
   width: 100%;
diff --git a/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.html b/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.html
index 3d356dc7c..204cb209e 100644
--- a/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.html
+++ b/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.html
@@ -1,15 +1,15 @@
 <p-table
-  [value]="videoAbuses" [lazy]="true" [paginator]="true" [totalRecords]="totalRecords" [rows]="rowsPerPage"
-  [sortField]="sort.field" [sortOrder]="sort.order" (onLazyLoad)="loadLazy($event)" dataKey="id"
+  [value]="videoAbuses" [lazy]="true" [paginator]="true" [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"
 >
   <ng-template pTemplate="header">
     <tr> <!-- header -->
       <th style="width: 40px;"></th>
-      <th i18n>Reporter</th>
-      <th style="width: 200px;" i18n pSortableColumn="createdAt">Created <p-sortIcon field="createdAt"></p-sortIcon></th>
+      <th style="width: 20%;" pResizableColumn i18n>Reporter</th>
       <th i18n>Video</th>
+      <th style="width:190px;" 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: 120px;"></th>
     </tr>
@@ -40,14 +40,15 @@
         </a>
       </td>
 
-      <td>{{ videoAbuse.createdAt }}</td>
-
       <td>
+        <span *ngIf="videoAbuse.video.deleted" i18n-title title="Video was deleted" class="glyphicon glyphicon-trash"></span>
         <a [href]="getVideoUrl(videoAbuse)" i18n-title title="Open video in a new tab" target="_blank" rel="noopener noreferrer">
           {{ videoAbuse.video.name }}
         </a>
       </td>
 
+      <td>{{ videoAbuse.createdAt }}</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>
@@ -55,7 +56,7 @@
       </td>
 
       <td class="action-cell">
-        <my-action-dropdown placement="bottom-right auto" i18n-label label="Actions" [actions]="videoAbuseActions" [entry]="videoAbuse"></my-action-dropdown>
+        <my-action-dropdown placement="bottom-right auto" container="body" i18n-label label="Actions" [actions]="videoAbuseActions" [entry]="videoAbuse"></my-action-dropdown>
       </td>
     </tr>
   </ng-template>
diff --git a/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.ts b/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.ts
index 5e48cf24f..9858cbce2 100644
--- a/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.ts
+++ b/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.ts
@@ -15,6 +15,7 @@ import { buildVideoLink, buildVideoEmbed } from 'src/assets/player/utils'
 import { getAbsoluteAPIUrl } from '@app/shared/misc/utils'
 import { DomSanitizer } from '@angular/platform-browser'
 import { BlocklistService } from '@app/shared/blocklist'
+import { VideoService } from '@app/shared/video/video.service'
 
 @Component({
   selector: 'my-video-abuse-list',
@@ -26,7 +27,8 @@ export class VideoAbuseListComponent extends RestTable implements OnInit {
 
   videoAbuses: (VideoAbuse & { moderationCommentHtml?: string, reasonHtml?: string })[] = []
   totalRecords = 0
-  rowsPerPage = 10
+  rowsPerPageOptions = [ 20, 50, 100 ]
+  rowsPerPage = this.rowsPerPageOptions[0]
   sort: SortMeta = { field: 'createdAt', order: 1 }
   pagination: RestPagination = { count: this.rowsPerPage, start: 0 }
 
@@ -36,6 +38,7 @@ export class VideoAbuseListComponent extends RestTable implements OnInit {
     private notifier: Notifier,
     private videoAbuseService: VideoAbuseService,
     private blocklistService: BlocklistService,
+    private videoService: VideoService,
     private videoBlacklistService: VideoBlacklistService,
     private confirmService: ConfirmService,
     private i18n: I18n,
@@ -78,10 +81,12 @@ export class VideoAbuseListComponent extends RestTable implements OnInit {
       [
         {
           label: this.i18n('Actions for the video'),
-          isHeader: true
+          isHeader: true,
+          isDisplayed: videoAbuse => !videoAbuse.video.deleted
         },
         {
           label: this.i18n('Blacklist video'),
+          isDisplayed: videoAbuse => !videoAbuse.video.deleted,
           handler: videoAbuse => {
             this.videoBlacklistService.blacklistVideo(videoAbuse.video.id, undefined, true)
               .subscribe(
@@ -94,6 +99,48 @@ export class VideoAbuseListComponent extends RestTable implements OnInit {
                 err => this.notifier.error(err.message)
               )
           }
+        },
+        {
+          label: this.i18n('Delete video'),
+          isDisplayed: videoAbuse => !videoAbuse.video.deleted,
+          handler: async videoAbuse => {
+            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)
+              .subscribe(
+                () => {
+                  this.notifier.success(this.i18n('Video deleted.'))
+
+                  this.updateVideoAbuseState(videoAbuse, VideoAbuseState.ACCEPTED)
+                },
+
+                err => this.notifier.error(err.message)
+              )
+          }
+        }
+      ],
+      [
+        {
+          label: this.i18n('Actions for the reporter'),
+          isHeader: true
+        },
+        {
+          label: this.i18n('Mute reporter'),
+          handler: async videoAbuse => {
+            const account = videoAbuse.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)
+              )
+          }
         }
       ]
     ]
@@ -180,7 +227,8 @@ export class VideoAbuseListComponent extends RestTable implements OnInit {
                      Object.assign(abuse, {
                        reasonHtml: await this.toHtml(abuse.reason),
                        moderationCommentHtml: await this.toHtml(abuse.moderationComment),
-                       embedHtml: this.sanitizer.bypassSecurityTrustHtml(this.getVideoEmbed(abuse))
+                       embedHtml: this.sanitizer.bypassSecurityTrustHtml(this.getVideoEmbed(abuse)),
+                       reporterAccount: new Account(abuse.reporterAccount)
                      })
                    }
 
diff --git a/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.html b/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.html
index 023f4e7b7..2f9fc8ba4 100644
--- a/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.html
+++ b/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.html
@@ -10,7 +10,7 @@
       <th i18n pSortableColumn="name">Video <p-sortIcon field="name"></p-sortIcon></th>
       <th style="width: 120px;" i18n>Sensitive</th>
       <th style="width: 120px;" i18n>Unfederated</th>
-      <th style="width: 200px;" i18n pSortableColumn="createdAt">Date <p-sortIcon field="createdAt"></p-sortIcon></th>
+      <th style="width: 190px;" i18n pSortableColumn="createdAt">Date <p-sortIcon field="createdAt"></p-sortIcon></th>
       <th style="width: 120px;"></th>
     </tr>
   </ng-template>
diff --git a/client/src/app/shared/buttons/action-dropdown.component.html b/client/src/app/shared/buttons/action-dropdown.component.html
index 0efc01d38..952b3b6f8 100644
--- a/client/src/app/shared/buttons/action-dropdown.component.html
+++ b/client/src/app/shared/buttons/action-dropdown.component.html
@@ -1,4 +1,4 @@
-<div class="dropdown-root" ngbDropdown [placement]="placement" container="body" *ngIf="areActionsDisplayed(actions, entry)">
+<div class="dropdown-root" ngbDropdown [placement]="placement" [container]="container" *ngIf="areActionsDisplayed(actions, entry)">
   <div
     class="action-button" [ngClass]="{ small: buttonSize === 'small', grey: theme === 'grey', orange: theme === 'orange', 'button-styled': buttonStyled }"
     ngbDropdownToggle role="button"
diff --git a/client/src/app/shared/buttons/action-dropdown.component.ts b/client/src/app/shared/buttons/action-dropdown.component.ts
index 8fcaa38b9..15f9556dc 100644
--- a/client/src/app/shared/buttons/action-dropdown.component.ts
+++ b/client/src/app/shared/buttons/action-dropdown.component.ts
@@ -27,6 +27,7 @@ export class ActionDropdownComponent<T> {
   @Input() entry: T
 
   @Input() placement = 'bottom-left auto'
+  @Input() container: null | 'body'
 
   @Input() buttonSize: DropdownButtonSize = 'normal'
   @Input() buttonDirection: DropdownDirection = 'horizontal'
diff --git a/client/src/sass/primeng-custom.scss b/client/src/sass/primeng-custom.scss
index b8e685aba..9c9a6197d 100644
--- a/client/src/sass/primeng-custom.scss
+++ b/client/src/sass/primeng-custom.scss
@@ -191,12 +191,22 @@ p-table {
 
       .ui-dropdown {
         position: absolute;
+        top: 3px;
         left: 0;
+
+        &.ui-state-focus {
+          box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest);
+        }
+
+        .ui-dropdown-label {
+          color: var(--inputPlaceholderColor);
+        }
       }
 
       .ui-paginator-current {
         position: absolute;
         right: 0;
+        color: var(--inputPlaceholderColor);
       }
 
       .ui-paginator-first,