8 files changed, 393 insertions, 8 deletions

diff --git a/client/src/app/+admin/admin.component.ts b/client/src/app/+admin/admin.component.ts
index b661a5517..dd92ed2ca 100644
--- a/client/src/app/+admin/admin.component.ts
+++ b/client/src/app/+admin/admin.component.ts
@@ -62,6 +62,13 @@ export class AdminComponent implements OnInit {
         iconName: 'cross'
       })
     }
+    if (this.hasVideoCommentsRight()) {
+      moderationItems.children.push({
+        label: $localize`Video comments`,
+        routerLink: '/admin/moderation/video-comments/list',
+        iconName: 'message-circle'
+      })
+    }
     if (this.hasAccountsBlocklistRight()) {
       moderationItems.children.push({
         label: $localize`Muted accounts`,
@@ -140,4 +147,8 @@ export class AdminComponent implements OnInit {
   hasDebugRight () {
     return this.auth.getUser().hasRight(UserRight.MANAGE_DEBUG)
   }
+
+  hasVideoCommentsRight () {
+    return this.auth.getUser().hasRight(UserRight.SEE_ALL_COMMENTS)
+  }
 }
diff --git a/client/src/app/+admin/admin.module.ts b/client/src/app/+admin/admin.module.ts
index da517a55b..5c0864f48 100644
--- a/client/src/app/+admin/admin.module.ts
+++ b/client/src/app/+admin/admin.module.ts
@@ -7,6 +7,7 @@ import { SharedFormModule } from '@app/shared/shared-forms'
 import { SharedGlobalIconModule } from '@app/shared/shared-icons'
 import { SharedMainModule } from '@app/shared/shared-main'
 import { SharedModerationModule } from '@app/shared/shared-moderation'
+import { SharedVideoCommentModule } from '@app/shared/shared-video-comment'
 import { AdminRoutingModule } from './admin-routing.module'
 import { AdminComponent } from './admin.component'
 import { ConfigComponent, EditCustomConfigComponent } from './config'
@@ -18,6 +19,7 @@ import { VideoRedundancyInformationComponent } from './follows/video-redundancie
 import { AbuseListComponent, VideoBlockListComponent } from './moderation'
 import { InstanceAccountBlocklistComponent, InstanceServerBlocklistComponent } from './moderation/instance-blocklist'
 import { ModerationComponent } from './moderation/moderation.component'
+import { VideoCommentListComponent } from './moderation/video-comment-list'
 import { PluginListInstalledComponent } from './plugins/plugin-list-installed/plugin-list-installed.component'
 import { PluginSearchComponent } from './plugins/plugin-search/plugin-search.component'
 import { PluginShowInstalledComponent } from './plugins/plugin-show-installed/plugin-show-installed.component'
@@ -37,6 +39,7 @@ import { UserCreateComponent, UserListComponent, UserPasswordComponent, UsersCom
     SharedModerationModule,
     SharedGlobalIconModule,
     SharedAbuseListModule,
+    SharedVideoCommentModule,
 
     TableModule,
     SelectButtonModule,
@@ -62,6 +65,7 @@ import { UserCreateComponent, UserListComponent, UserPasswordComponent, UsersCom
     ModerationComponent,
     VideoBlockListComponent,
     AbuseListComponent,
+    VideoCommentListComponent,
 
     InstanceServerBlocklistComponent,
     InstanceAccountBlocklistComponent,
diff --git a/client/src/app/+admin/moderation/moderation.routes.ts b/client/src/app/+admin/moderation/moderation.routes.ts
index b60dd5334..2e28f0911 100644
--- a/client/src/app/+admin/moderation/moderation.routes.ts
+++ b/client/src/app/+admin/moderation/moderation.routes.ts
@@ -1,8 +1,9 @@
 import { Routes } from '@angular/router'
+import { AbuseListComponent } from '@app/+admin/moderation/abuse-list'
 import { InstanceAccountBlocklistComponent, InstanceServerBlocklistComponent } from '@app/+admin/moderation/instance-blocklist'
 import { ModerationComponent } from '@app/+admin/moderation/moderation.component'
-import { AbuseListComponent } from '@app/+admin/moderation/abuse-list'
 import { VideoBlockListComponent } from '@app/+admin/moderation/video-block-list'
+import { VideoCommentListComponent } from './video-comment-list'
 import { UserRightGuard } from '@app/core'
 import { UserRight } from '@shared/models'
 
@@ -37,6 +38,7 @@ export const ModerationRoutes: Routes = [
           }
         }
       },
+
       {
         path: 'video-blacklist',
         redirectTo: 'video-blocks/list',
@@ -64,10 +66,28 @@ export const ModerationRoutes: Routes = [
         data: {
           userRight: UserRight.MANAGE_VIDEO_BLACKLIST,
           meta: {
-            title: $localize`Videos blocked`
+            title: $localize`Blocked videos`
           }
         }
       },
+
+      {
+        path: 'video-comments',
+        redirectTo: 'video-comments/list',
+        pathMatch: 'full'
+      },
+      {
+        path: 'video-comments/list',
+        component: VideoCommentListComponent,
+        canActivate: [ UserRightGuard ],
+        data: {
+          userRight: UserRight.SEE_ALL_COMMENTS,
+          meta: {
+            title: $localize`Video comments`
+          }
+        }
+      },
+
       {
         path: 'blocklist/accounts',
         component: InstanceAccountBlocklistComponent,
diff --git a/client/src/app/+admin/moderation/video-block-list/video-block-list.component.scss b/client/src/app/+admin/moderation/video-block-list/video-block-list.component.scss
index c92d1c39c..0e34150c1 100644
--- a/client/src/app/+admin/moderation/video-block-list/video-block-list.component.scss
+++ b/client/src/app/+admin/moderation/video-block-list/video-block-list.component.scss
@@ -1,12 +1,8 @@
 @import 'mixins';
 
 my-global-icon {
-  @include apply-svg-color(#7d7d7d);
-
-  width: 12px;
-  height: 12px;
-  position: relative;
-  top: -1px;
+  width: 24px;
+  height: 24px;
 }
 
 .input-group {
diff --git a/client/src/app/+admin/moderation/video-comment-list/index.ts b/client/src/app/+admin/moderation/video-comment-list/index.ts
new file mode 100644
index 000000000..eb08b4177
--- /dev/null
+++ b/client/src/app/+admin/moderation/video-comment-list/index.ts
@@ -0,0 +1 @@
+export * from './video-comment-list.component'
diff --git a/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.html b/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.html
new file mode 100644
index 000000000..45c5fe28f
--- /dev/null
+++ b/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.html
@@ -0,0 +1,118 @@
+<h1>
+  <my-global-icon iconName="message-circle" aria-hidden="true"></my-global-icon>
+  <ng-container i18n>Video comments</ng-container>
+
+  <my-feed [syndicationItems]="syndicationItems"></my-feed>
+</h1>
+
+<em>This view also shows comments from muted accounts.</em>
+
+<p-table
+  [value]="comments" [lazy]="true" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [rowsPerPageOptions]="rowsPerPageOptions"
+  [sortField]="sort.field" [sortOrder]="sort.order" (onLazyLoad)="loadLazy($event)" dataKey="id"
+  [showCurrentPageReport]="true" i18n-currentPageReportTemplate
+  currentPageReportTemplate="Showing {{'{first}'}} to {{'{last}'}} of {{'{totalRecords}'}} comments"
+  (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 comments filters</h6>
+              <a [routerLink]="[ '/admin/moderation/video-comments/list' ]" [queryParams]="{ 'search': 'local:true' }" class="dropdown-item" i18n>Local comments</a>
+              <a [routerLink]="[ '/admin/moderation/video-comments/list' ]" [queryParams]="{ 'search': 'local:false' }" class="dropdown-item" i18n>Remote comments</a>
+            </div>
+          </div>
+          <input
+            type="text" name="table-filter" id="table-filter" i18n-placeholder placeholder="Filter..."
+            (keyup)="onInputSearch($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>
+      <th style="width: 40px"></th>
+      <th style="width: 300px" i18n>Account</th>
+      <th style="width: 300px" i18n>Video</th>
+      <th i18n>Comment</th>
+      <th style="width: 150px;" i18n pSortableColumn="createdAt">Date <p-sortIcon field="createdAt"></p-sortIcon></th>
+      <th style="width: 150px;"></th>
+    </tr>
+  </ng-template>
+
+  <ng-template pTemplate="body" let-videoComment let-expanded="expanded">
+    <tr>
+      <td class="expand-cell c-hand" [pRowToggler]="videoComment" 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]="videoComment.account.localUrl" i18n-title title="Open account in a new tab" target="_blank" rel="noopener noreferrer">
+          <div class="chip two-lines">
+            <img
+              class="avatar"
+              [src]="videoComment.accountAvatarUrl"
+              alt=""
+            >
+            <div>
+              {{ videoComment.account.displayName }}
+              <span>{{ videoComment.by }}</span>
+            </div>
+          </div>
+        </a>
+      </td>
+
+      <td class="video">
+        <em i18n>Commented video</em>
+
+        <a [href]="videoComment.localUrl" target="_blank" rel="noopener noreferrer">{{ videoComment.video.name }}</a>
+      </td>
+
+      <td class="comment-html">
+        <div [innerHTML]="videoComment.textHtml"></div>
+      </td>
+
+      <td>{{ videoComment.createdAt | date: 'short' }}</td>
+
+      <td class="action-cell">
+        <my-action-dropdown
+          [ngClass]="{ 'show': expanded }" placement="bottom-right" container="body"
+          i18n-label label="Actions" [actions]="videoCommentActions" [entry]="videoComment"
+        ></my-action-dropdown>
+      </td>
+    </tr>
+  </ng-template>
+
+  <ng-template pTemplate="rowexpansion" let-videoComment>
+    <tr>
+      <td class="expand-cell" colspan="5">
+        <div [innerHTML]="videoComment.textHtml"></div>
+      </td>
+    </tr>
+  </ng-template>
+
+  <ng-template pTemplate="emptymessage">
+    <tr>
+      <td colspan="5">
+        <div class="no-results">
+          <ng-container *ngIf="search" i18n>No comments found matching current filters.</ng-container>
+          <ng-container *ngIf="!search" i18n>No comments found.</ng-container>
+        </div>
+      </td>
+    </tr>
+  </ng-template>
+</p-table>
+
diff --git a/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.scss b/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.scss
new file mode 100644
index 000000000..439835899
--- /dev/null
+++ b/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.scss
@@ -0,0 +1,66 @@
+@import 'mixins';
+
+h1 {
+  my-feed {
+    margin-left: 5px;
+    display: inline-block;
+
+    ::ng-deep {
+      my-global-icon {
+        width: 15px !important;
+        top: 0 !important;
+      }
+    }
+  }
+}
+
+my-global-icon {
+  width: 24px;
+  height: 24px;
+}
+
+.input-group {
+  @include peertube-input-group(300px);
+
+  .dropdown-toggle::after {
+    margin-left: 0;
+  }
+}
+
+.caption {
+  justify-content: flex-end;
+
+  input {
+    @include peertube-input-text(250px);
+    flex-grow: 1;
+  }
+}
+
+.video {
+  display: flex;
+  flex-direction: column;
+
+  em {
+    font-size: 11px;
+  }
+
+  a {
+    @include ellipsis
+  }
+}
+
+.comment-html {
+  ::ng-deep {
+    > div {
+      max-height: 22px;
+    }
+
+    div, p {
+      @include ellipsis;
+    }
+
+    p {
+      margin: 0;
+    }
+  }
+}
diff --git a/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.ts b/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.ts
new file mode 100644
index 000000000..d26047125
--- /dev/null
+++ b/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.ts
@@ -0,0 +1,169 @@
+import { SortMeta } from 'primeng/api'
+import { filter } from 'rxjs/operators'
+import { AfterViewInit, Component, OnInit } from '@angular/core'
+import { ActivatedRoute, Params, Router } from '@angular/router'
+import { AuthService, ConfirmService, MarkdownService, Notifier, RestPagination, RestTable } from '@app/core'
+import { DropdownAction } from '@app/shared/shared-main'
+import { BulkService } from '@app/shared/shared-moderation'
+import { VideoCommentAdmin, VideoCommentService } from '@app/shared/shared-video-comment'
+import { FeedFormat, UserRight } from '@shared/models'
+
+@Component({
+  selector: 'my-video-comment-list',
+  templateUrl: './video-comment-list.component.html',
+  styleUrls: [ '../../../shared/shared-moderation/moderation.scss', './video-comment-list.component.scss' ]
+})
+export class VideoCommentListComponent extends RestTable implements OnInit, AfterViewInit {
+  comments: VideoCommentAdmin[]
+  totalRecords = 0
+  sort: SortMeta = { field: 'createdAt', order: -1 }
+  pagination: RestPagination = { count: this.rowsPerPage, start: 0 }
+
+  videoCommentActions: DropdownAction<VideoCommentAdmin>[][] = []
+
+  syndicationItems = [
+    {
+      format: FeedFormat.RSS,
+      label: 'media 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()
+    }
+  ]
+
+  get authUser () {
+    return this.auth.getUser()
+  }
+
+  constructor (
+    private auth: AuthService,
+    private notifier: Notifier,
+    private confirmService: ConfirmService,
+    private videoCommentService: VideoCommentService,
+    private markdownRenderer: MarkdownService,
+    private route: ActivatedRoute,
+    private router: Router,
+    private bulkService: BulkService
+    ) {
+    super()
+
+    this.videoCommentActions = [
+      [
+        {
+          label: $localize`Delete this comment`,
+          handler: comment => this.deleteComment(comment),
+          isDisplayed: () => this.authUser.hasRight(UserRight.REMOVE_ANY_VIDEO_COMMENT)
+        },
+
+        {
+          label: $localize`Delete all comments of this account`,
+          description: $localize`Comments are deleted after a few minutes`,
+          handler: comment => this.deleteUserComments(comment),
+          isDisplayed: () => this.authUser.hasRight(UserRight.REMOVE_ANY_VIDEO_COMMENT)
+        }
+      ]
+    ]
+  }
+
+  ngOnInit () {
+    this.initialize()
+
+    this.route.queryParams
+      .pipe(filter(params => params.search !== undefined && params.search !== null))
+      .subscribe(params => {
+        this.search = params.search
+        this.setTableFilter(params.search)
+        this.loadData()
+      })
+  }
+
+  ngAfterViewInit () {
+    if (this.search) this.setTableFilter(this.search)
+  }
+
+  onInputSearch (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-comments/list' ], { queryParams })
+  }
+
+  resetTableFilter () {
+    this.setTableFilter('')
+    this.setQueryParams('')
+    this.resetSearch()
+  }
+  /* END Table filter functions */
+
+  getIdentifier () {
+    return 'VideoCommentListComponent'
+  }
+
+  toHtml (text: string) {
+    return this.markdownRenderer.textMarkdownToHTML(text, true, true)
+  }
+
+  protected loadData () {
+    this.videoCommentService.getAdminVideoComments({
+      pagination: this.pagination,
+      sort: this.sort,
+      search: this.search
+    }).subscribe(
+        async resultList => {
+          this.totalRecords = resultList.total
+
+          this.comments = []
+
+          for (const c of resultList.data) {
+            this.comments.push(
+              new VideoCommentAdmin(c, await this.toHtml(c.text))
+            )
+          }
+        },
+
+        err => this.notifier.error(err.message)
+      )
+  }
+
+  private deleteComment (comment: VideoCommentAdmin) {
+    this.videoCommentService.deleteVideoComment(comment.video.id, comment.id)
+      .subscribe(
+        () => this.loadData(),
+
+        err => this.notifier.error(err.message)
+      )
+  }
+
+  private async deleteUserComments (comment: VideoCommentAdmin) {
+    const message = $localize`Do you really want to delete all comments of ${comment.by}?`
+    const res = await this.confirmService.confirm(message, $localize`Delete`)
+    if (res === false) return
+
+    const options = {
+      accountName: comment.by,
+      scope: 'instance' as 'instance'
+    }
+
+    this.bulkService.removeCommentsOf(options)
+      .subscribe(
+        () => {
+          this.notifier.success($localize`Comments of ${options.accountName} will be deleted in a few minutes`)
+        },
+
+        err => this.notifier.error(err.message)
+      )
+  }
+}