9 files changed, 374 insertions, 6 deletions

diff --git a/client/src/app/shared/blocklist/account-blocklist.component.html b/client/src/app/shared/blocklist/account-blocklist.component.html
new file mode 100644
index 000000000..486785f35
--- /dev/null
+++ b/client/src/app/shared/blocklist/account-blocklist.component.html
@@ -0,0 +1,64 @@
+<p-table
+  [value]="blockedAccounts" [lazy]="true" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [rowsPerPageOptions]="rowsPerPageOptions"
+  [sortField]="sort.field" [sortOrder]="sort.order" (onLazyLoad)="loadLazy($event)" (onPage)="onPage($event)"
+  [showCurrentPageReport]="true" i18n-currentPageReportTemplate
+  currentPageReportTemplate="Showing {{'{first}'}} to {{'{last}'}} of {{'{totalRecords}'}} muted accounts"
+>
+  <ng-template pTemplate="caption">
+    <div class="caption">
+      <div class="ml-auto has-feedback has-clear">
+        <input
+          type="text" name="table-filter" id="table-filter" i18n-placeholder placeholder="Filter..."
+          (keyup)="onSearch($event)"
+        >
+        <a class="glyphicon glyphicon-remove-sign form-control-feedback form-control-clear" (click)="resetSearch()"></a>
+        <span class="sr-only" i18n>Clear filters</span>
+      </div>
+    </div>
+  </ng-template>
+
+  <ng-template pTemplate="header">
+    <tr>
+      <th style="width: 100%;" i18n>Account</th>
+      <th style="width: 150px;" i18n pSortableColumn="createdAt">Muted at <p-sortIcon field="createdAt"></p-sortIcon></th>
+      <th style="width: 150px;"></th> <!-- column for action buttons -->
+    </tr>
+  </ng-template>
+
+  <ng-template pTemplate="body" let-accountBlock>
+    <tr>
+      <td>
+        <a [href]="accountBlock.blockedAccount.url" i18n-title title="Open account in a new tab" target="_blank" rel="noopener noreferrer">
+          <div class="chip two-lines">
+            <img
+              class="avatar"
+              [src]="accountBlock.blockedAccount.avatar?.path"
+              (error)="switchToDefaultAvatar($event)"
+              alt="Avatar"
+            >
+            <div>
+              {{ accountBlock.blockedAccount.displayName }}
+              <span class="text-muted">{{ accountBlock.blockedAccount.nameWithHost }}</span>
+            </div>
+          </div>
+        </a>
+      </td>
+
+      <td>{{ accountBlock.createdAt | date: 'short' }}</td>
+      <td class="action-cell">
+        <button class="unblock-button" (click)="unblockAccount(accountBlock)" i18n>Unmute</button>
+      </td>
+    </tr>
+  </ng-template>
+
+  <ng-template pTemplate="emptymessage">
+    <tr>
+      <td colspan="6">
+        <div class="no-results">
+          <ng-container *ngIf="search" i18n>No account found matching current filters.</ng-container>
+          <ng-container *ngIf="!search" i18n>No account found.</ng-container>
+        </div>
+      </td>
+    </tr>
+  </ng-template>
+</p-table>
diff --git a/client/src/app/shared/blocklist/account-blocklist.component.scss b/client/src/app/shared/blocklist/account-blocklist.component.scss
new file mode 100644
index 000000000..aa8363ff4
--- /dev/null
+++ b/client/src/app/shared/blocklist/account-blocklist.component.scss
@@ -0,0 +1,16 @@
+@import '_variables';
+@import '_mixins';
+
+.caption {
+  justify-content: flex-end;
+
+  input {
+    @include peertube-input-text(250px);
+    flex-grow: 1;
+  }
+}
+
+.unblock-button {
+  @include peertube-button;
+  @include grey-button;
+}
\ No newline at end of file
diff --git a/client/src/app/shared/blocklist/account-blocklist.component.ts b/client/src/app/shared/blocklist/account-blocklist.component.ts
new file mode 100644
index 000000000..dc5ac4044
--- /dev/null
+++ b/client/src/app/shared/blocklist/account-blocklist.component.ts
@@ -0,0 +1,79 @@
+import { OnInit } from '@angular/core'
+import { Notifier } from '@app/core'
+import { I18n } from '@ngx-translate/i18n-polyfill'
+import { RestPagination, RestTable } from '@app/shared/rest'
+import { SortMeta } from 'primeng/api'
+import { AccountBlock } from './account-block.model'
+import { BlocklistService, BlocklistComponentType } from './blocklist.service'
+import { Actor } from '@app/shared/actor/actor.model'
+
+export class GenericAccountBlocklistComponent extends RestTable implements OnInit {
+  // @ts-ignore: "Abstract methods can only appear within an abstract class"
+  abstract mode: BlocklistComponentType
+
+  blockedAccounts: AccountBlock[] = []
+  totalRecords = 0
+  sort: SortMeta = { field: 'createdAt', order: -1 }
+  pagination: RestPagination = { count: this.rowsPerPage, start: 0 }
+
+  constructor (
+    private notifier: Notifier,
+    private blocklistService: BlocklistService,
+    private i18n: I18n
+  ) {
+    super()
+  }
+
+  // @ts-ignore: "Abstract methods can only appear within an abstract class"
+  abstract getIdentifier (): string
+
+  ngOnInit () {
+    this.initialize()
+  }
+
+  switchToDefaultAvatar ($event: Event) {
+    ($event.target as HTMLImageElement).src = Actor.GET_DEFAULT_AVATAR_URL()
+  }
+
+  unblockAccount (accountBlock: AccountBlock) {
+    const blockedAccount = accountBlock.blockedAccount
+    const operation = this.mode === BlocklistComponentType.Account
+      ? this.blocklistService.unblockAccountByUser(blockedAccount)
+      : this.blocklistService.unblockAccountByInstance(blockedAccount)
+
+    operation.subscribe(
+      () => {
+        this.notifier.success(
+          this.mode === BlocklistComponentType.Account
+            ? this.i18n('Account {{nameWithHost}} unmuted.', { nameWithHost: blockedAccount.nameWithHost })
+            : this.i18n('Account {{nameWithHost}} unmuted by your instance.', { nameWithHost: blockedAccount.nameWithHost })
+        )
+
+        this.loadData()
+      }
+    )
+  }
+
+  protected loadData () {
+    const operation = this.mode === BlocklistComponentType.Account
+      ? this.blocklistService.getUserAccountBlocklist({
+        pagination: this.pagination,
+        sort: this.sort,
+        search: this.search
+      })
+      : this.blocklistService.getInstanceAccountBlocklist({
+        pagination: this.pagination,
+        sort: this.sort,
+        search: this.search
+      })
+
+    return operation.subscribe(
+      resultList => {
+        this.blockedAccounts = resultList.data
+        this.totalRecords = resultList.total
+      },
+
+      err => this.notifier.error(err.message)
+    )
+  }
+}
diff --git a/client/src/app/shared/blocklist/blocklist.service.ts b/client/src/app/shared/blocklist/blocklist.service.ts
index 5cf265bc1..c70a8173a 100644
--- a/client/src/app/shared/blocklist/blocklist.service.ts
+++ b/client/src/app/shared/blocklist/blocklist.service.ts
@@ -8,6 +8,8 @@ import { AccountBlock as AccountBlockServer, ResultList, ServerBlock } from '../
 import { Account } from '@app/shared/account/account.model'
 import { AccountBlock } from '@app/shared/blocklist/account-block.model'
 
+export enum BlocklistComponentType { Account, Instance }
+
 @Injectable()
 export class BlocklistService {
   static BASE_USER_BLOCKLIST_URL = environment.apiUrl + '/api/v1/users/me/blocklist'
@@ -21,10 +23,14 @@ export class BlocklistService {
 
   /*********************** User -> Account blocklist ***********************/
 
-  getUserAccountBlocklist (pagination: RestPagination, sort: SortMeta) {
+  getUserAccountBlocklist (options: { pagination: RestPagination, sort: SortMeta, search?: string }) {
+    const { pagination, sort, search } = options
+
     let params = new HttpParams()
     params = this.restService.addRestGetParams(params, pagination, sort)
 
+    if (search) params = params.append('search', search)
+
     return this.authHttp.get<ResultList<AccountBlock>>(BlocklistService.BASE_USER_BLOCKLIST_URL + '/accounts', { params })
                .pipe(
                  map(res => this.restExtractor.convertResultListDateToHuman(res)),
@@ -49,10 +55,14 @@ export class BlocklistService {
 
   /*********************** User -> Server blocklist ***********************/
 
-  getUserServerBlocklist (pagination: RestPagination, sort: SortMeta) {
+  getUserServerBlocklist (options: { pagination: RestPagination, sort: SortMeta, search?: string }) {
+    const { pagination, sort, search } = options
+
     let params = new HttpParams()
     params = this.restService.addRestGetParams(params, pagination, sort)
 
+    if (search) params = params.append('search', search)
+
     return this.authHttp.get<ResultList<ServerBlock>>(BlocklistService.BASE_USER_BLOCKLIST_URL + '/servers', { params })
                .pipe(
                  map(res => this.restExtractor.convertResultListDateToHuman(res)),
@@ -76,7 +86,7 @@ export class BlocklistService {
 
   /*********************** Instance -> Account blocklist ***********************/
 
-  getInstanceAccountBlocklist (options: { pagination: RestPagination, sort: SortMeta, search: string }) {
+  getInstanceAccountBlocklist (options: { pagination: RestPagination, sort: SortMeta, search?: string }) {
     const { pagination, sort, search } = options
 
     let params = new HttpParams()
@@ -108,7 +118,7 @@ export class BlocklistService {
 
   /*********************** Instance -> Server blocklist ***********************/
 
-  getInstanceServerBlocklist (options: { pagination: RestPagination, sort: SortMeta, search: string }) {
+  getInstanceServerBlocklist (options: { pagination: RestPagination, sort: SortMeta, search?: string }) {
     const { pagination, sort, search } = options
 
     let params = new HttpParams()
diff --git a/client/src/app/shared/blocklist/index.ts b/client/src/app/shared/blocklist/index.ts
index 5886ca07e..188057b19 100644
--- a/client/src/app/shared/blocklist/index.ts
+++ b/client/src/app/shared/blocklist/index.ts
@@ -1,2 +1,4 @@
 export * from './blocklist.service'
 export * from './account-block.model'
+export * from './server-blocklist.component'
+export * from './account-blocklist.component'
diff --git a/client/src/app/shared/blocklist/server-blocklist.component.html b/client/src/app/shared/blocklist/server-blocklist.component.html
new file mode 100644
index 000000000..977e0e141
--- /dev/null
+++ b/client/src/app/shared/blocklist/server-blocklist.component.html
@@ -0,0 +1,59 @@
+<p-table
+  [value]="blockedServers" [lazy]="true" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [rowsPerPageOptions]="rowsPerPageOptions"
+  [sortField]="sort.field" [sortOrder]="sort.order" (onLazyLoad)="loadLazy($event)" (onPage)="onPage($event)"
+  [showCurrentPageReport]="true" i18n-currentPageReportTemplate
+  currentPageReportTemplate="Showing {{'{first}'}} to {{'{last}'}} of {{'{totalRecords}'}} muted instances"
+>
+  <ng-template pTemplate="caption">
+    <div class="caption">
+      <div class="ml-auto has-feedback has-clear">
+        <input
+          type="text" name="table-filter" id="table-filter" i18n-placeholder placeholder="Filter..."
+          (keyup)="onSearch($event)"
+        >
+        <a class="glyphicon glyphicon-remove-sign form-control-feedback form-control-clear" (click)="resetSearch()"></a>
+        <span class="sr-only" i18n>Clear filters</span>
+      </div>
+      <a class="ml-2 block-button" (click)="addServersToBlock()" (key.enter)="addServersToBlock()">
+        <my-global-icon iconName="add" aria-hidden="true"></my-global-icon>
+        <ng-container i18n>Mute domain</ng-container>
+      </a>
+    </div>
+  </ng-template>
+
+  <ng-template pTemplate="header">
+    <tr>
+      <th style="width: 100%;" i18n>Instance</th>
+      <th style="width: 150px;" i18n pSortableColumn="createdAt">Muted at <p-sortIcon field="createdAt"></p-sortIcon></th>
+      <th style="width: 150px;"></th> <!-- column for action buttons -->
+    </tr>
+  </ng-template>
+
+  <ng-template pTemplate="body" let-serverBlock>
+    <tr>
+      <td>
+        <a [href]="'https://' + serverBlock.blockedServer.host" i18n-title title="Open instance in a new tab" target="_blank" rel="noopener noreferrer">
+          {{ serverBlock.blockedServer.host }}
+          <span class="glyphicon glyphicon-new-window"></span>
+        </a>
+      </td>
+      <td>{{ serverBlock.createdAt | date: 'short' }}</td>
+      <td class="action-cell">
+        <button class="unblock-button" (click)="unblockServer(serverBlock)" i18n>Unmute</button>
+      </td>
+    </tr>
+  </ng-template>
+
+  <ng-template pTemplate="emptymessage">
+    <tr>
+      <td colspan="6">
+        <div class="no-results">
+          <ng-container *ngIf="search" i18n>No server found matching current filters.</ng-container>
+          <ng-container *ngIf="!search" i18n>No server found.</ng-container>
+        </div>
+      </td>
+    </tr>
+  </ng-template>
+</p-table>
+
+<my-batch-domains-modal #batchDomainsModal i18n-action action="Mute domains" (domains)="onDomainsToBlock($event)"></my-batch-domains-modal>
diff --git a/client/src/app/shared/blocklist/server-blocklist.component.scss b/client/src/app/shared/blocklist/server-blocklist.component.scss
new file mode 100644
index 000000000..9ddb76850
--- /dev/null
+++ b/client/src/app/shared/blocklist/server-blocklist.component.scss
@@ -0,0 +1,34 @@
+@import '_variables';
+@import '_mixins';
+
+a {
+  @include disable-default-a-behaviour;
+  display: inline-block;
+
+  &, &:hover {
+    color: pvar(--mainForegroundColor);
+  }
+
+  span {
+    font-size: 80%;
+    color: pvar(--inputPlaceholderColor);
+  }
+}
+
+.caption {
+  justify-content: flex-end;
+
+  input {
+    @include peertube-input-text(250px);
+    flex-grow: 1;
+  }
+}
+
+.unblock-button {
+  @include peertube-button;
+  @include grey-button;
+}
+
+.block-button {
+  @include create-button;
+}
diff --git a/client/src/app/shared/blocklist/server-blocklist.component.ts b/client/src/app/shared/blocklist/server-blocklist.component.ts
new file mode 100644
index 000000000..f2b36badc
--- /dev/null
+++ b/client/src/app/shared/blocklist/server-blocklist.component.ts
@@ -0,0 +1,101 @@
+import { OnInit, ViewChild } from '@angular/core'
+import { Notifier } from '@app/core'
+import { I18n } from '@ngx-translate/i18n-polyfill'
+import { RestPagination, RestTable } from '@app/shared/rest'
+import { SortMeta } from 'primeng/api'
+import { BlocklistService, BlocklistComponentType } from './blocklist.service'
+import { ServerBlock } from '../../../../../shared/models/blocklist/server-block.model'
+import { BatchDomainsModalComponent } from '@app/+admin/config/shared/batch-domains-modal.component'
+
+export class GenericServerBlocklistComponent extends RestTable implements OnInit {
+  @ViewChild('batchDomainsModal') batchDomainsModal: BatchDomainsModalComponent
+
+  // @ts-ignore: "Abstract methods can only appear within an abstract class"
+  public abstract mode: BlocklistComponentType
+
+  blockedServers: ServerBlock[] = []
+  totalRecords = 0
+  sort: SortMeta = { field: 'createdAt', order: -1 }
+  pagination: RestPagination = { count: this.rowsPerPage, start: 0 }
+
+  constructor (
+    protected notifier: Notifier,
+    protected blocklistService: BlocklistService,
+    protected i18n: I18n
+  ) {
+    super()
+  }
+
+  ngOnInit () {
+    this.initialize()
+  }
+
+  // @ts-ignore: "Abstract methods can only appear within an abstract class"
+  public abstract getIdentifier (): string
+
+  unblockServer (serverBlock: ServerBlock) {
+    const operation = (host: string) => this.mode === BlocklistComponentType.Account
+        ? this.blocklistService.unblockServerByUser(host)
+        : this.blocklistService.unblockServerByInstance(host)
+    const host = serverBlock.blockedServer.host
+
+    operation(host).subscribe(
+      () => {
+        this.notifier.success(
+          this.mode === BlocklistComponentType.Account
+            ? this.i18n('Instance {{host}} unmuted.', { host })
+            : this.i18n('Instance {{host}} unmuted by your instance.', { host })
+        )
+
+        this.loadData()
+      }
+    )
+  }
+
+  addServersToBlock () {
+    this.batchDomainsModal.openModal()
+  }
+
+  onDomainsToBlock (domains: string[]) {
+    const operation = (domain: string) => this.mode === BlocklistComponentType.Account
+      ? this.blocklistService.blockServerByUser(domain)
+      : this.blocklistService.blockServerByInstance(domain)
+
+    domains.forEach(domain => {
+      operation(domain).subscribe(
+        () => {
+          this.notifier.success(
+            this.mode === BlocklistComponentType.Account
+              ? this.i18n('Instance {{domain}} muted.', { domain })
+              : this.i18n('Instance {{domain}} muted by your instance.', { domain })
+          )
+
+          this.loadData()
+        }
+      )
+    })
+  }
+
+  protected loadData () {
+    const operation = this.mode === BlocklistComponentType.Account
+      ? this.blocklistService.getUserServerBlocklist({
+        pagination: this.pagination,
+        sort: this.sort,
+        search: this.search
+      })
+      : this.blocklistService.getInstanceServerBlocklist({
+        pagination: this.pagination,
+        sort: this.sort,
+        search: this.search
+      })
+
+    return operation.subscribe(
+      resultList => {
+        this.blockedServers = resultList.data
+        this.totalRecords = resultList.total
+      },
+
+      err => this.notifier.error(err.message)
+    )
+  }
+}
diff --git a/client/src/app/shared/shared.module.ts b/client/src/app/shared/shared.module.ts
index 2035097d7..98fab9e16 100644
--- a/client/src/app/shared/shared.module.ts
+++ b/client/src/app/shared/shared.module.ts
@@ -10,6 +10,7 @@ import { NgModule } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { RouterModule } from '@angular/router'
 import { BatchDomainsValidatorsService } from '@app/+admin/config/shared/batch-domains-validators.service'
+import { BatchDomainsModalComponent } from '@app/+admin/config/shared/batch-domains-modal.component'
 import { MyAccountInterfaceSettingsComponent } from '@app/+my-account/my-account-settings/my-account-interface'
 import { MyAccountVideoSettingsComponent } from '@app/+my-account/my-account-settings/my-account-video-settings'
 import { ActorAvatarInfoComponent } from '@app/+my-account/shared/actor-avatar-info.component'
@@ -192,7 +193,8 @@ import { VideoService } from './video/video.service'
 
     MyAccountVideoSettingsComponent,
     MyAccountInterfaceSettingsComponent,
-    ActorAvatarInfoComponent
+    ActorAvatarInfoComponent,
+    BatchDomainsModalComponent
   ],
 
   exports: [
@@ -274,7 +276,8 @@ import { VideoService } from './video/video.service'
 
     MyAccountVideoSettingsComponent,
     MyAccountInterfaceSettingsComponent,
-    ActorAvatarInfoComponent
+    ActorAvatarInfoComponent,
+    BatchDomainsModalComponent
   ],
 
   providers: [