4 files changed, 328 insertions, 0 deletions

diff --git a/client/src/app/+admin/moderation/video-block-list/index.ts b/client/src/app/+admin/moderation/video-block-list/index.ts
new file mode 100644
index 000000000..ec4de8f62
--- /dev/null
+++ b/client/src/app/+admin/moderation/video-block-list/index.ts
@@ -0,0 +1 @@
+export * from './video-block-list.component'
diff --git a/client/src/app/+admin/moderation/video-block-list/video-block-list.component.html b/client/src/app/+admin/moderation/video-block-list/video-block-list.component.html
new file mode 100644
index 000000000..f3ec37314
--- /dev/null
+++ b/client/src/app/+admin/moderation/video-block-list/video-block-list.component.html
@@ -0,0 +1,113 @@
+<p-table
+  [value]="blocklist" [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}'}} blocked videos"
+  (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 block filters</h6>
+              <a [routerLink]="[ '/admin/moderation/video-blocks/list' ]" [queryParams]="{ 'search': 'type:auto' }" class="dropdown-item" i18n>Automatic blocks</a>
+              <a [routerLink]="[ '/admin/moderation/video-blocks/list' ]" [queryParams]="{ 'search': 'type:manual' }" class="dropdown-item" i18n>Manual blocks</a>
+            </div>
+          </div>
+          <input
+            type="text" name="table-filter" id="table-filter" i18n-placeholder placeholder="Filter..."
+            (keyup)="onBlockSearch($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 i18n pSortableColumn="name">Video <p-sortIcon field="name"></p-sortIcon></th>
+      <th style="width: 100px;" i18n>Sensitive</th>
+      <th style="width: 120px;" i18n>Unfederated</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-videoBlock let-expanded="expanded">
+    <tr>
+      <td *ngIf="!videoBlock.reason"></td>
+      <td *ngIf="videoBlock.reason" class="expand-cell c-hand" [pRowToggler]="videoBlock" 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]="getVideoUrl(videoBlock)" class="video-table-video-link" i18n-title title="Open video in a new tab" target="_blank" rel="noopener noreferrer">
+          <div class="video-table-video">
+            <div class="video-table-video-image">
+              <img [src]="videoBlock.video.thumbnailPath">
+            </div>
+            <div class="video-table-video-text">
+              <div>
+                <my-global-icon i18n-title title="The video was blocked due to automatic blocking of new videos" *ngIf="videoBlock.type == 2" iconName="robot"></my-global-icon>
+                {{ videoBlock.video.name }}
+              </div>
+              <div class="text-muted">by {{ videoBlock.video.channel?.displayName }} on {{ videoBlock.video.channel?.host }} </div>
+            </div>
+          </div>
+        </a>
+      </td>
+
+      <ng-container *ngIf="videoBlock.reason">
+        <td class="c-hand" [pRowToggler]="videoBlock">{{ booleanToText(videoBlock.video.nsfw) }}</td>
+        <td class="c-hand" [pRowToggler]="videoBlock">{{ booleanToText(videoBlock.unfederated) }}</td>
+        <td class="c-hand" [pRowToggler]="videoBlock">{{ videoBlock.createdAt | date: 'short' }}</td>
+      </ng-container>
+      <ng-container *ngIf="!videoBlock.reason">
+        <td>{{ booleanToText(videoBlock.video.nsfw) }}</td>
+        <td>{{ booleanToText(videoBlock.unfederated) }}</td>
+        <td>{{ videoBlock.createdAt | date: 'short' }}</td>
+      </ng-container>
+
+      <td class="action-cell">
+        <my-action-dropdown
+          [ngClass]="{ 'show': expanded }" placement="bottom-right" container="body"
+          i18n-label label="Actions" [actions]="videoBlocklistActions" [entry]="videoBlock"
+        ></my-action-dropdown>
+      </td>
+    </tr>
+  </ng-template>
+
+  <ng-template pTemplate="rowexpansion" let-videoBlock>
+    <tr>
+      <td class="expand-cell" colspan="6">
+        <div class="d-flex moderation-expanded">
+          <span class="col-2 moderation-expanded-label" i18n>Block reason:</span>
+          <span class="col-9 moderation-expanded-text" [innerHTML]="videoBlock.reasonHtml"></span>
+        </div>
+      </td>
+    </tr>
+  </ng-template>
+
+  <ng-template pTemplate="emptymessage">
+    <tr>
+      <td colspan="6">
+        <div class="empty-table-message">
+          <ng-container *ngIf="search" i18n>No blocked video found matching current filters.</ng-container>
+          <ng-container *ngIf="!search" i18n>No blocked video found.</ng-container>
+        </div>
+      </td>
+    </tr>
+  </ng-template>
+</p-table>
+
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
new file mode 100644
index 000000000..43a365608
--- /dev/null
+++ b/client/src/app/+admin/moderation/video-block-list/video-block-list.component.scss
@@ -0,0 +1,18 @@
+@import 'mixins';
+
+my-global-icon {
+  @include apply-svg-color(#7d7d7d);
+
+  width: 12px;
+  height: 12px;
+  position: relative;
+  top: -1px;
+}
+
+.input-group {
+  @include peertube-input-group(300px);
+
+  .dropdown-toggle::after {
+    margin-left: 0;
+  }
+}
diff --git a/client/src/app/+admin/moderation/video-block-list/video-block-list.component.ts b/client/src/app/+admin/moderation/video-block-list/video-block-list.component.ts
new file mode 100644
index 000000000..e72ab5348
--- /dev/null
+++ b/client/src/app/+admin/moderation/video-block-list/video-block-list.component.ts
@@ -0,0 +1,196 @@
+import { Component, OnInit } from '@angular/core'
+import { SortMeta } from 'primeng/api'
+import { Notifier, ServerService } from '@app/core'
+import { ConfirmService } from '../../../core'
+import { RestPagination, RestTable, VideoBlockService } from '../../../shared'
+import { VideoBlocklist, VideoBlockType } from '../../../../../../shared'
+import { I18n } from '@ngx-translate/i18n-polyfill'
+import { DropdownAction } from '../../../shared/buttons/action-dropdown.component'
+import { Video } from '../../../shared/video/video.model'
+import { MarkdownService } from '@app/shared/renderer'
+import { Params, ActivatedRoute, Router } from '@angular/router'
+import { filter, switchMap } from 'rxjs/operators'
+import { VideoService } from '@app/shared/video/video.service'
+
+@Component({
+  selector: 'my-video-block-list',
+  templateUrl: './video-block-list.component.html',
+  styleUrls: [ '../moderation.component.scss', './video-block-list.component.scss' ]
+})
+export class VideoBlockListComponent extends RestTable implements OnInit {
+  blocklist: (VideoBlocklist & { reasonHtml?: string })[] = []
+  totalRecords = 0
+  sort: SortMeta = { field: 'createdAt', order: -1 }
+  pagination: RestPagination = { count: this.rowsPerPage, start: 0 }
+  listBlockTypeFilter: VideoBlockType = undefined
+
+  videoBlocklistActions: DropdownAction<VideoBlocklist>[][] = []
+
+  constructor (
+    private notifier: Notifier,
+    private serverService: ServerService,
+    private confirmService: ConfirmService,
+    private videoBlocklistService: VideoBlockService,
+    private markdownRenderer: MarkdownService,
+    private videoService: VideoService,
+    private route: ActivatedRoute,
+    private router: Router,
+    private i18n: I18n
+  ) {
+    super()
+
+    this.videoBlocklistActions = [
+      [
+        {
+          label: this.i18n('Internal actions'),
+          isHeader: true
+        },
+        {
+          label: this.i18n('Switch video block to manual'),
+          handler: videoBlock => {
+            this.videoBlocklistService.unblockVideo(videoBlock.video.id).pipe(
+              switchMap(_ => this.videoBlocklistService.blockVideo(videoBlock.video.id, undefined, true))
+            ).subscribe(
+              () => {
+                this.notifier.success(this.i18n('Video {{name}} switched to manual block.', { name: videoBlock.video.name }))
+                this.loadData()
+              },
+        
+              err => this.notifier.error(err.message)
+            )
+          }
+        }
+      ],
+      [
+        {
+          label: this.i18n('Actions for the video'),
+          isHeader: true,
+        },
+        {
+          label: this.i18n('Unblock video'),
+          handler: videoBlock => this.unblockVideo(videoBlock)
+        },
+
+        {
+          label: this.i18n('Delete video'),
+          handler: async videoBlock => {
+            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(videoBlock.video.id)
+              .subscribe(
+                () => {
+                  this.notifier.success(this.i18n('Video deleted.'))
+                },
+
+                err => this.notifier.error(err.message)
+              )
+          }
+        }
+      ]
+    ]
+  }
+
+  ngOnInit () {
+    this.serverService.getConfig()
+        .subscribe(config => {
+          // don't filter if auto-blacklist is not enabled as this will be the only list
+          if (config.autoBlacklist.videos.ofUsers.enabled) {
+            this.listBlockTypeFilter = VideoBlockType.MANUAL
+          }
+        })
+
+    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)
+  }
+
+  /* Table filter functions */
+  onBlockSearch (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-blocks/list' ], { queryParams })
+  }
+
+  resetTableFilter () {
+    this.setTableFilter('')
+    this.setQueryParams('')
+    this.resetSearch()
+  }
+  /* END Table filter functions */
+
+  getIdentifier () {
+    return 'VideoBlockListComponent'
+  }
+
+  getVideoUrl (videoBlock: VideoBlocklist) {
+    return Video.buildClientUrl(videoBlock.video.uuid)
+  }
+
+  booleanToText (value: boolean) {
+    if (value === true) return this.i18n('yes')
+
+    return this.i18n('no')
+  }
+
+  toHtml (text: string) {
+    return this.markdownRenderer.textMarkdownToHTML(text)
+  }
+
+  async unblockVideo (entry: VideoBlocklist) {
+    const confirmMessage = this.i18n(
+      'Do you really want to unblock this video? It will be available again in the videos list.'
+    )
+
+    const res = await this.confirmService.confirm(confirmMessage, this.i18n('Unblock'))
+    if (res === false) return
+
+    this.videoBlocklistService.unblockVideo(entry.video.id).subscribe(
+      () => {
+        this.notifier.success(this.i18n('Video {{name}} unblocked.', { name: entry.video.name }))
+        this.loadData()
+      },
+
+      err => this.notifier.error(err.message)
+    )
+  }
+
+  protected loadData () {
+    this.videoBlocklistService.listBlocks({
+      pagination: this.pagination,
+      sort: this.sort,
+      search: this.search,
+    })
+      .subscribe(
+        async resultList => {
+          this.totalRecords = resultList.total
+
+          this.blocklist = resultList.data
+
+          for (const element of this.blocklist) {
+            Object.assign(element, { reasonHtml: await this.toHtml(element.reason) })
+          }
+        },
+
+        err => this.notifier.error(err.message)
+      )
+  }
+}