Refactor video miniatures

3 files changed, 26 insertions, 51 deletions

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
index c4e5be0d6..5ef497fa7 100644
--- 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
@@ -6,15 +6,7 @@
       <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>Sensitive: </span><span> {{ video.nsfw }}</span></div>
-    </div>
+    <my-video-miniature [video]="video" [displayAsRow]="true" [displayOptions]="miniatureDisplayOptions"></my-video-miniature>
 
     <!-- Display only once -->
     <div class="action-selection-mode" *ngIf="isInSelectionMode() === true && i === 0">
@@ -30,13 +22,12 @@
       </div>
     </div>
 
-    <div class="video-buttons" *ngIf="isInSelectionMode() === false">
-      <my-button
-        i18n-label
-        label="Unblacklist"
-        icon="tick"
-        (click)="removeVideoFromBlacklist(video)"
-      ></my-button>
-    </div>
+    <my-button
+      *ngIf="isInSelectionMode() === false"
+      i18n-label
+      label="Unblacklist"
+      icon="tick"
+      (click)="removeVideoFromBlacklist(video)"
+    ></my-button>
   </div>
 </div>
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
index a73c17eb9..e43a2aa7b 100644
--- 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
@@ -46,26 +46,8 @@
     margin-left: 12px;
   }
 
-  my-video-thumbnail {
-    margin-right: 10px;
-  }
-
-  .video-info {
+  my-video-miniature {
     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;
   }
 }
 
@@ -73,21 +55,12 @@
   .video {
     flex-direction: column;
     height: auto;
-    text-align: center;
-
-    .video-info-name {
-      margin: auto;
-    }
 
-    input[type=checkbox] {
+    .checkbox-container {
       display: none;
     }
 
-    my-video-thumbnail {
-      margin-right: 0;
-    }
-
-    .video-buttons {
+    my-button {
       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
index af68d7e2e..d66a6dcae 100644
--- 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
@@ -1,14 +1,14 @@
-import { Component, OnInit, OnDestroy } from '@angular/core'
-import { Location } from '@angular/common'
+import { Component, OnDestroy, OnInit } from '@angular/core'
 import { I18n } from '@ngx-translate/i18n-polyfill'
-import { Router, ActivatedRoute } from '@angular/router'
+import { ActivatedRoute, Router } from '@angular/router'
 import { AbstractVideoList } from '@app/shared/video/abstract-video-list'
 import { ComponentPagination } from '@app/shared/rest/component-pagination.model'
-import { Notifier, AuthService, ServerService } from '@app/core'
+import { AuthService, Notifier, ServerService } 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'
+import { MiniatureDisplayOptions } from '@app/shared/video/video-miniature.component'
 
 @Component({
   selector: 'my-video-auto-blacklist-list',
@@ -24,6 +24,17 @@ export class VideoAutoBlacklistListComponent extends AbstractVideoList implement
     totalItems: null
   }
 
+  miniatureDisplayOptions: MiniatureDisplayOptions = {
+    date: true,
+    views: false,
+    by: true,
+    privacyLabel: false,
+    privacyText: true,
+    state: false,
+    blacklistInfo: false,
+    nsfw: true
+  }
+
   constructor (
     protected router: Router,
     protected route: ActivatedRoute,