Factorize video display in table for moderation components, apply it to blacklisted videos as well

5 files changed, 99 insertions, 83 deletions

diff --git a/client/src/app/+admin/moderation/moderation.component.scss b/client/src/app/+admin/moderation/moderation.component.scss
index ef6a39b5d..a4ee65423 100644
--- a/client/src/app/+admin/moderation/moderation.component.scss
+++ b/client/src/app/+admin/moderation/moderation.component.scss
@@ -27,7 +27,7 @@
   }
 }
 
-.video-abuse-states {
+.video-table-states {
   & > :not(:first-child) {
     margin-left: .4rem;
   }
@@ -68,3 +68,71 @@ my-action-dropdown.show {
     display: block !important;
   }
 }
+
+
+.video-table-video-link {
+  @include disable-outline;
+  position: relative;
+  top: 3px;
+}
+
+.video-table-video {
+  display: inline-flex;
+
+  .video-table-video-image {
+    @include miniature-thumbnail;
+
+    $image-height: 45px;
+
+    height: $image-height;
+    width: #{(16/9) * $image-height};
+    margin-right: 0.5rem;
+    border-radius: 2px;
+    border: none;
+    background: transparent;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+
+    img {
+      height: 100%;
+      width: 100%;
+      border-radius: 2px;
+    }
+
+    span {
+      color: var(--inputPlaceholderColor);
+    }
+
+    .video-table-video-image-label {
+      @include static-thumbnail-overlay;
+      position: absolute;
+      border-radius: 3px;
+      font-size: 10px;
+      padding: 0 3px;
+      line-height: 1.3;
+      bottom: 2px;
+      right: 2px;
+    }
+  }
+
+  .video-table-video-text {
+    display: inline-flex;
+    flex-direction: column;
+    justify-content: center;
+    font-size: 90%;
+    color: var(--mainForegroundColor);
+    line-height: 1rem;
+
+    div .glyphicon {
+      font-size: 80%;
+      color: gray;
+      margin-left: 0.1rem;
+    }
+
+    div + div {
+      font-size: 80%;
+    }
+  }
+}
diff --git a/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.html b/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.html
index 67ef28408..e2c08f910 100644
--- a/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.html
+++ b/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.html
@@ -52,16 +52,16 @@
       </td>
 
       <td *ngIf="!videoAbuse.video.deleted">
-        <a [href]="getVideoUrl(videoAbuse)" class="video-abuse-video-link" i18n-title title="Open video in a new tab" target="_blank" rel="noopener noreferrer">
-          <div class="video-abuse-video">
-            <div class="video-abuse-video-image">
+        <a [href]="getVideoUrl(videoAbuse)" 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]="videoAbuse.video.thumbnailPath">
               <span
-                class="video-abuse-video-image-label" *ngIf="videoAbuse.count > 1"
+                class="video-table-video-image-label" *ngIf="videoAbuse.count > 1"
                 i18n-title title="This video has been reported multiple times."
               >{{ videoAbuse.nth }}/{{ videoAbuse.count }}</span>
             </div>
-            <div class="video-abuse-video-text">
+            <div class="video-table-video-text">
               <div>
                 {{ videoAbuse.video.name }}
                 <span *ngIf="!videoAbuse.video.blacklisted" class="glyphicon glyphicon-new-window"></span>
@@ -74,9 +74,9 @@
       </td>
 
       <td *ngIf="videoAbuse.video.deleted" class="c-hand" [pRowToggler]="videoAbuse">
-        <div class="video-abuse-video" i18n-title title="Video was deleted">
-          <div class="video-abuse-video-image"><span i18n>Deleted</span></div>
-          <div class="video-abuse-video-text">
+        <div class="video-table-video" i18n-title title="Video was deleted">
+          <div class="video-table-video-image"><span i18n>Deleted</span></div>
+          <div class="video-table-video-text">
             <div>
               {{ videoAbuse.video.name }}
               <span class="glyphicon glyphicon-trash"></span>
@@ -123,7 +123,7 @@
                       <span class="text-muted">{{ createByString(videoAbuse.reporterAccount) }}</span>
                     </div>
                   </div>
-                  <a routerLink="/admin/moderation/video-abuses/list" class="ml-auto text-muted video-abuse-links" i18n>
+                  <a routerLink="/admin/moderation/video-abuses/list" class="ml-auto text-muted video-details-links" i18n>
                     {videoAbuse.countReportsForReporter, plural, =1 {1 report} other {{{ videoAbuse.countReportsForReporter }} reports}}<span class="ml-1 glyphicon glyphicon-flag"></span>
                   </a>
                 </span>
@@ -142,14 +142,14 @@
                       <span class="text-muted">{{ videoAbuse.video.channel.ownerAccount ? createByString(videoAbuse.video.channel.ownerAccount) : '' }}</span>
                     </div>
                   </div>
-                  <a routerLink="/admin/moderation/video-abuses/list" class="ml-auto text-muted video-abuse-links" *ngIf="!videoAbuse.video.deleted" i18n>
+                  <a routerLink="/admin/moderation/video-abuses/list" class="ml-auto text-muted video-details-links" *ngIf="!videoAbuse.video.deleted" i18n>
                     {videoAbuse.countReportsForReportee, plural, =1 {1 report} other {{{ videoAbuse.countReportsForReportee }} reports}}<span class="ml-1 glyphicon glyphicon-flag"></span>
                   </a>
                 </span>
               </div>
               <div class="d-flex">
                 <span class="col-3 moderation-expanded-label" i18n>Updated</span>
-                <time class="col-9 moderation-expanded-text video-abuse-date-updated">{{ videoAbuse.updatedAt | date: 'medium' }}</time>
+                <time class="col-9 moderation-expanded-text video-details-date-updated">{{ videoAbuse.updatedAt | date: 'medium' }}</time>
               </div>
 
               <!-- report text -->
diff --git a/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.scss b/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.scss
index b5dc53b3a..a9251e2f0 100644
--- a/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.scss
+++ b/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.scss
@@ -9,78 +9,15 @@
   }
 }
 
-.video-abuse-date-updated {
+.video-details-date-updated {
   font-size: 90%;
   margin-top: .1rem;
 }
 
-.video-abuse-links {
+.video-details-links {
   @include disable-default-a-behaviour;
 }
 
-.video-abuse-video-link {
-  @include disable-outline;
-  position: relative;
-  top: 3px;
-}
-
-.video-abuse-video {
-  display: inline-flex;
-
-  .video-abuse-video-image {
-    @include miniature-thumbnail;
-
-    $image-height: 45px;
-
-    height: $image-height;
-    width: #{(16/9) * $image-height};
-    margin-right: 0.5rem;
-    border-radius: 2px;
-    border: none;
-    background: transparent;
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    position: relative;
-
-    img {
-      height: 100%;
-      width: 100%;
-      border-radius: 2px;
-    }
-
-    span {
-      color: var(--inputPlaceholderColor);
-    }
-
-    .video-abuse-video-image-label {
-      @include static-thumbnail-overlay;
-      position: absolute;
-      border-radius: 3px;
-      font-size: 10px;
-      padding: 0 3px;
-      line-height: 1.3;
-      bottom: 2px;
-      right: 2px;
-    }
-  }
-
-  .video-abuse-video-text {
-    display: inline-flex;
-    flex-direction: column;
-    justify-content: center;
-    font-size: 90%;
-    color: var(--mainForegroundColor);
-    line-height: 1rem;
-
-    div .glyphicon {
-      font-size: 80%;
-      color: gray;
-      margin-left: 0.1rem;
-    }
-
-    div + div {
-      font-size: 80%;
-    }
-  }
+.video-abuse-states .glyphicon-comment {
+  margin-left: 0.5rem;
 }
diff --git a/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.html b/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.html
index c5c0fdbbf..90a786ad0 100644
--- a/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.html
+++ b/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.html
@@ -8,7 +8,7 @@
     <tr>
       <th style="width: 40px"></th>
       <th i18n pSortableColumn="name">Video <p-sortIcon field="name"></p-sortIcon></th>
-      <th style="width: 120px;" i18n>Sensitive</th>
+      <th style="width: 100px;" i18n>Sensitive</th>
       <th style="width: 120px;" i18n>Unfederated</th>
       <th style="width: 190px;" i18n pSortableColumn="createdAt">Date <p-sortIcon field="createdAt"></p-sortIcon></th>
       <th style="width: 120px;"></th>
@@ -25,8 +25,19 @@
       </td>
 
       <td>
-        <a [href]="getVideoUrl(videoBlacklist)" i18n-title title="Go to the video" target="_blank" rel="noopener noreferrer">
-          {{ videoBlacklist.video.name }}
+        <a [href]="getVideoUrl(videoBlacklist)" 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]="videoBlacklist.video.thumbnailPath">
+            </div>
+            <div class="video-table-video-text">
+              <div>
+                {{ videoBlacklist.video.name }}
+                <span class="glyphicon glyphicon-new-window"></span>
+              </div>
+              <div class="text-muted">by {{ videoBlacklist.video.channel?.displayName }} on {{ videoBlacklist.video.channel?.host }} </div>
+            </div>
+          </div>
         </a>
       </td>
 
diff --git a/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.ts b/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.ts
index 4e9965bee..c38d30865 100644
--- a/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.ts
+++ b/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.ts
@@ -38,7 +38,7 @@ export class VideoBlacklistListComponent extends RestTable implements OnInit {
   ngOnInit () {
     this.serverService.getConfig()
         .subscribe(config => {
-          // don't filter if auto-blacklist not enabled as this will be only list
+          // don't filter if auto-blacklist not enabled as this will be the only list
           if (config.autoBlacklist.videos.ofUsers.enabled) {
             this.listBlacklistTypeFilter = VideoBlacklistType.MANUAL
           }