4 files changed, 244 insertions, 0 deletions

diff --git a/client/src/app/+admin/moderation/video-auto-blacklist-list/index.ts b/client/src/app/+admin/moderation/video-auto-blacklist-list/index.ts
new file mode 100644
index 000000000..e3522f68c
--- /dev/null
+++ b/client/src/app/+admin/moderation/video-auto-blacklist-list/index.ts
@@ -0,0 +1 @@
+export * from './video-auto-blacklist-list.component'
diff --git a/client/src/app/+admin/moderation/video-auto-blacklist-list/video-auto-blacklist-list.component.html b/client/src/app/+admin/moderation/video-auto-blacklist-list/video-auto-blacklist-list.component.html
new file mode 100644
index 000000000..fe579ffd7
--- /dev/null
+++ b/client/src/app/+admin/moderation/video-auto-blacklist-list/video-auto-blacklist-list.component.html
@@ -0,0 +1,49 @@
+<div i18n *ngIf="pagination.totalItems === 0">No results.</div>
+<div
+  myInfiniteScroller
+  [pageHeight]="pageHeight"
+  (nearOfTop)="onNearOfTop()"
+  (nearOfBottom)="onNearOfBottom()"
+  (pageChanged)="onPageChanged($event)"
+  class="videos" #videosElement
+>
+  <div *ngFor="let videos of videoPages; let i = index" class="videos-page">
+    <div class="video" *ngFor="let video of videos; let j = index">
+      <div class="checkbox-container">
+        <my-peertube-checkbox [inputName]="'video-check-' + video.id" [(ngModel)]="checkedVideos[video.id]"></my-peertube-checkbox>
+      </div>
+      <my-video-thumbnail [video]="video"></my-video-thumbnail>
+
+      <div class="video-info">
+        <a class="video-info-name" [routerLink]="['/videos/watch', video.uuid]" [attr.title]="video.name">{{ video.name }}</a>
+        <div>{{ video.account.displayName }}</div>
+        <div>{{ video.publishedAt | myFromNow }}</div>
+        <div><span i18n>Privacy: </span><span>{{ video.privacy.label }}</span></div>
+        <div><span i18n>Sensitve: </span><span> {{ video.nsfw }}</span></div>
+      </div>
+
+      <!-- Display only once -->
+      <div class="action-selection-mode" *ngIf="isInSelectionMode() === true && i === 0 && j === 0">
+        <div class="action-selection-mode-child">
+          <span i18n class="action-button action-button-cancel-selection" (click)="abortSelectionMode()">
+            Cancel
+          </span>
+
+          <span class="action-button action-button-unblacklist-selection" (click)="removeSelectedVideosFromBlacklist()">
+            <my-global-icon iconName="tick"></my-global-icon>
+            <ng-container i18n>Unblacklist</ng-container>
+          </span>
+        </div>
+      </div>
+
+      <div class="video-buttons" *ngIf="isInSelectionMode() === false">
+        <my-button
+          i18n-label
+          label="Unblacklist"
+          icon="tick"
+          (click)="removeVideoFromBlacklist(video)"
+        ></my-button>
+      </div>
+    </div>
+
+</div>
\ No newline at end of file
diff --git a/client/src/app/+admin/moderation/video-auto-blacklist-list/video-auto-blacklist-list.component.scss b/client/src/app/+admin/moderation/video-auto-blacklist-list/video-auto-blacklist-list.component.scss
new file mode 100644
index 000000000..a73c17eb9
--- /dev/null
+++ b/client/src/app/+admin/moderation/video-auto-blacklist-list/video-auto-blacklist-list.component.scss
@@ -0,0 +1,94 @@
+@import '_variables';
+@import '_mixins';
+
+.action-selection-mode {
+  width: 194px;
+  display: flex;
+  justify-content: flex-end;
+
+  .action-selection-mode-child {
+    position: fixed;
+
+    .action-button {
+      display: inline-block;
+    }
+
+    .action-button-cancel-selection {
+      @include peertube-button;
+      @include grey-button;
+
+      margin-right: 10px;
+    }
+
+    .action-button-unblacklist-selection {
+      @include peertube-button;
+      @include orange-button;
+      @include button-with-icon(21px);
+
+      my-global-icon {
+        @include apply-svg-color(#fff);
+      }
+    }
+  }
+}
+
+.video {
+  @include row-blocks;
+
+  &:first-child {
+    margin-top: 47px;
+  }
+
+  .checkbox-container {
+    display: flex;
+    align-items: center;
+    margin-right: 20px;
+    margin-left: 12px;
+  }
+
+  my-video-thumbnail {
+    margin-right: 10px;
+  }
+
+  .video-info {
+    flex-grow: 1;
+
+    .video-info-name {
+      @include disable-default-a-behaviour;
+
+      color: var(--mainForegroundColor);
+      display: block;
+      width: fit-content;
+      font-size: 16px;
+      font-weight: $font-semibold;
+    }
+  }
+
+  .video-buttons {
+    min-width: 190px;
+  }
+}
+
+@media screen and (max-width: $small-view) {
+  .video {
+    flex-direction: column;
+    height: auto;
+    text-align: center;
+
+    .video-info-name {
+      margin: auto;
+    }
+
+    input[type=checkbox] {
+      display: none;
+    }
+
+    my-video-thumbnail {
+      margin-right: 0;
+    }
+
+    .video-buttons {
+      margin-top: 10px;
+    }
+  }
+}
diff --git a/client/src/app/+admin/moderation/video-auto-blacklist-list/video-auto-blacklist-list.component.ts b/client/src/app/+admin/moderation/video-auto-blacklist-list/video-auto-blacklist-list.component.ts
new file mode 100644
index 000000000..b79f574c9
--- /dev/null
+++ b/client/src/app/+admin/moderation/video-auto-blacklist-list/video-auto-blacklist-list.component.ts
@@ -0,0 +1,100 @@
+import { Component, OnInit, OnDestroy } from '@angular/core'
+import { Location } from '@angular/common'
+import { I18n } from '@ngx-translate/i18n-polyfill'
+import { Router, ActivatedRoute } from '@angular/router'
+import { AbstractVideoList } from '@app/shared/video/abstract-video-list'
+import { ComponentPagination } from '@app/shared/rest/component-pagination.model'
+import { Notifier, AuthService } from '@app/core'
+import { Video } from '@shared/models'
+import { VideoBlacklistService } from '@app/shared'
+import { immutableAssign } from '@app/shared/misc/utils'
+import { ScreenService } from '@app/shared/misc/screen.service'
+
+@Component({
+  selector: 'my-video-auto-blacklist-list',
+  templateUrl: './video-auto-blacklist-list.component.html',
+  styleUrls: [ './video-auto-blacklist-list.component.scss' ]
+})
+export class VideoAutoBlacklistListComponent extends AbstractVideoList implements OnInit, OnDestroy {
+  titlePage: string
+  currentRoute = '/admin/moderation/video-auto-blacklist/list'
+  checkedVideos: { [ id: number ]: boolean } = {}
+  pagination: ComponentPagination = {
+    currentPage: 1,
+    itemsPerPage: 5,
+    totalItems: null
+  }
+
+  protected baseVideoWidth = -1
+  protected baseVideoHeight = 155
+
+  constructor (
+    protected router: Router,
+    protected route: ActivatedRoute,
+    protected i18n: I18n,
+    protected notifier: Notifier,
+    protected location: Location,
+    protected authService: AuthService,
+    protected screenService: ScreenService,
+    private videoBlacklistService: VideoBlacklistService,
+  ) {
+    super()
+
+    this.titlePage = this.i18n('Auto-blacklisted videos')
+  }
+
+  ngOnInit () {
+    super.ngOnInit()
+  }
+
+  ngOnDestroy () {
+    super.ngOnDestroy()
+  }
+
+  abortSelectionMode () {
+    this.checkedVideos = {}
+  }
+
+  isInSelectionMode () {
+    return Object.keys(this.checkedVideos).some(k => this.checkedVideos[k] === true)
+  }
+
+  getVideosObservable (page: number) {
+    const newPagination = immutableAssign(this.pagination, { currentPage: page })
+
+    return this.videoBlacklistService.getAutoBlacklistedAsVideoList(newPagination)
+  }
+
+  generateSyndicationList () {
+    throw new Error('Method not implemented.')
+  }
+
+  removeVideoFromBlacklist (entry: Video) {
+    this.videoBlacklistService.removeVideoFromBlacklist(entry.id).subscribe(
+      () => {
+        this.notifier.success(this.i18n('Video {{name}} removed from blacklist.', { name: entry.name }))
+        this.reloadVideos()
+      },
+
+      error => this.notifier.error(error.message)
+    )
+  }
+
+  removeSelectedVideosFromBlacklist () {
+    const toReleaseVideosIds = Object.keys(this.checkedVideos)
+                                      .filter(k => this.checkedVideos[ k ] === true)
+                                      .map(k => parseInt(k, 10))
+
+    this.videoBlacklistService.removeVideoFromBlacklist(toReleaseVideosIds).subscribe(
+      () => {
+        this.notifier.success(this.i18n('{{num}} videos removed from blacklist.', { num: toReleaseVideosIds.length }))
+
+        this.abortSelectionMode()
+        this.reloadVideos()
+      },
+
+      error => this.notifier.error(error.message)
+    )
+  }
+
+}