Improve blacklist management

3 files changed, 54 insertions, 3 deletions

diff --git a/client/src/app/videos/+video-watch/video-watch.component.html b/client/src/app/videos/+video-watch/video-watch.component.html
index f82f1c554..8d4a4a5ca 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.html
+++ b/client/src/app/videos/+video-watch/video-watch.component.html
@@ -1,4 +1,4 @@
-<div class="row">
+<div class="root-row row">
   <!-- We need the video container for videojs so we just hide it -->
   <div id="video-element-wrapper">
     <div *ngIf="remoteServerDown" class="remote-server-down">
@@ -17,7 +17,12 @@
   </div>
 
   <div i18n class="alert alert-info" *ngIf="hasVideoScheduledPublication()">
-    This video will be published on {{ video.scheduledUpdate.updateAt | date: 'full' }}
+    This video will be published on {{ video.scheduledUpdate.updateAt | date: 'full' }}.
+  </div>
+
+  <div class="alert alert-danger" *ngIf="video?.blacklisted">
+    <div class="blacklisted-label" i18n>This video is blacklisted.</div>
+    {{ video.blacklistedReason }}
   </div>
 
   <!-- Video information -->
@@ -98,6 +103,10 @@
                   <span class="icon icon-blacklist"></span> <ng-container i18n>Blacklist</ng-container>
                 </a>
 
+                <a *ngIf="isVideoUnblacklistable()" class="dropdown-item" i18n-title title="Unblacklist this video" href="#" (click)="unblacklistVideo($event)">
+                  <span class="icon icon-unblacklist"></span> <ng-container i18n>Unblacklist</ng-container>
+                </a>
+
                 <a *ngIf="isVideoRemovable()" class="dropdown-item" i18n-title title="Delete this video" href="#" (click)="removeVideo($event)">
                   <span class="icon icon-delete"></span> <ng-container i18n>Delete</ng-container>
                 </a>
diff --git a/client/src/app/videos/+video-watch/video-watch.component.scss b/client/src/app/videos/+video-watch/video-watch.component.scss
index e63ab7bbd..1354de32e 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/videos/+video-watch/video-watch.component.scss
@@ -1,6 +1,14 @@
 @import '_variables';
 @import '_mixins';
 
+.root-row {
+  flex-direction: column;
+}
+
+.blacklisted-label {
+  font-weight: $font-semibold;
+}
+
 #video-element-wrapper {
   background-color: #000;
   display: flex;
@@ -259,6 +267,10 @@
                   background-image: url('../../../assets/images/video/blacklist.svg');
                 }
 
+                &.icon-unblacklist {
+                  background-image: url('../../../assets/images/global/undo.svg');
+                }
+
                 &.icon-delete {
                   background-image: url('../../../assets/images/global/delete-black.svg');
                 }
diff --git a/client/src/app/videos/+video-watch/video-watch.component.ts b/client/src/app/videos/+video-watch/video-watch.component.ts
index 878655d4a..bea13ec99 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/videos/+video-watch/video-watch.component.ts
@@ -121,7 +121,8 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
         this.videoCaptionService.listCaptions(uuid)
       )
         .pipe(
-          catchError(err => this.restExtractor.redirectTo404IfNotFound(err, [ 400, 404 ]))
+          // If 401, the video is private or blacklisted so redirect to 404
+          catchError(err => this.restExtractor.redirectTo404IfNotFound(err, [ 400, 401, 404 ]))
         )
         .subscribe(([ video, captionsResult ]) => {
           const startTime = this.route.snapshot.queryParams.start
@@ -217,6 +218,31 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     this.videoBlacklistModal.show()
   }
 
+  async unblacklistVideo (event: Event) {
+    event.preventDefault()
+
+    const confirmMessage = this.i18n(
+      'Do you really want to remove this video from the blacklist? It will be available again in the videos list.'
+    )
+
+    const res = await this.confirmService.confirm(confirmMessage, this.i18n('Unblacklist'))
+    if (res === false) return
+
+    this.videoBlacklistService.removeVideoFromBlacklist(this.video.id).subscribe(
+      () => {
+        this.notificationsService.success(
+          this.i18n('Success'),
+          this.i18n('Video {{name}} removed from the blacklist.', { name: this.video.name })
+        )
+
+        this.video.blacklisted = false
+        this.video.blacklistedReason = null
+      },
+
+      err => this.notificationsService.error(this.i18n('Error'), err.message)
+    )
+  }
+
   isUserLoggedIn () {
     return this.authService.isLoggedIn()
   }
@@ -229,6 +255,10 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     return this.video.isBlackistableBy(this.user)
   }
 
+  isVideoUnblacklistable () {
+    return this.video.isUnblacklistableBy(this.user)
+  }
+
   getVideoPoster () {
     if (!this.video) return ''