Improve blacklist management

2 files changed, 19 insertions, 2 deletions

diff --git a/client/src/app/+my-account/my-account-videos/my-account-videos.component.html b/client/src/app/+my-account/my-account-videos/my-account-videos.component.html
index 4823e2db9..8a6cb5c32 100644
--- a/client/src/app/+my-account/my-account-videos/my-account-videos.component.html
+++ b/client/src/app/+my-account/my-account-videos/my-account-videos.component.html
@@ -18,6 +18,10 @@
         <a class="video-info-name" [routerLink]="['/videos/watch', video.uuid]" [attr.title]="video.name">{{ video.name }}</a>
         <span i18n class="video-info-date-views">{{ video.createdAt | myFromNow }} - {{ video.views | myNumberFormatter }} views</span>
         <div class="video-info-private">{{ video.privacy.label }}{{ getStateLabel(video) }}</div>
+        <div *ngIf="video.blacklisted" class="video-info-blacklisted">
+          <span class="blacklisted-label" i18n>Blacklisted</span>
+          <span class="blacklisted-reason" *ngIf="video.blacklistedReason">{{ video.blacklistedReason }}</span>
+        </div>
       </div>
 
       <!-- Display only once -->
diff --git a/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss b/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss
index 9df28f472..64a04fa20 100644
--- a/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss
+++ b/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss
@@ -76,12 +76,25 @@
       font-weight: $font-semibold;
     }
 
-    .video-info-date-views, .video-info-private {
+    .video-info-date-views,
+    .video-info-private,
+    .video-info-blacklisted {
       font-size: 13px;
 
-      &.video-info-private {
+      &.video-info-private,
+      &.video-info-blacklisted .blacklisted-label {
         font-weight: $font-semibold;
       }
+
+      &.video-info-blacklisted {
+        color: red;
+
+        .blacklisted-reason {
+          &::before {
+            content: ' - ';
+          }
+        }
+      }
     }
   }