Add video channel and video thumbnail, rework video appearance in row

3 files changed, 118 insertions, 11 deletions

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 204cb209e..2204bb371 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
@@ -41,9 +41,22 @@
       </td>
 
       <td>
-        <span *ngIf="videoAbuse.video.deleted" i18n-title title="Video was deleted" class="glyphicon glyphicon-trash"></span>
-        <a [href]="getVideoUrl(videoAbuse)" i18n-title title="Open video in a new tab" target="_blank" rel="noopener noreferrer">
-          {{ videoAbuse.video.name }}
+        <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">
+              <img *ngIf="!videoAbuse.video.deleted" [src]="videoAbuse.video.thumbnailPath">
+              <span *ngIf="videoAbuse.video.deleted" i18n>Deleted</span>
+            </div>
+            <div class="video-abuse-video-text">
+              <div>
+                {{ videoAbuse.video.name }}
+                <span *ngIf="!videoAbuse.video.deleted && !videoAbuse.video.blacklisted" class="glyphicon glyphicon-new-window"></span>
+                <span *ngIf="videoAbuse.video.deleted" i18n-title title="Video was deleted" class="glyphicon glyphicon-trash"></span>
+                <span *ngIf="videoAbuse.video.blacklisted" i18n-title title="Video was blacklisted" class="glyphicon glyphicon-ban-circle"></span>
+              </div>
+              <div class="text-muted">by {{ videoAbuse.video.channel?.displayName }} on {{ videoAbuse.video.channel?.host }} </div>
+            </div>
+          </div>
         </a>
       </td>
 
@@ -78,10 +91,10 @@
 
             <div class="col-4">
               <div class="screenratio">
-                <div *ngIf="videoAbuse.video.deleted">
+                <div *ngIf="videoAbuse.video.deleted || videoAbuse.video.blacklisted">
                   <span i18n>The video was {{ videoAbuse.video.deleted ? 'deleted' : 'blacklisted' }}</span>
                 </div>
-                <div *ngIf="!videoAbuse.video.deleted" [innerHTML]="videoAbuse.embedHtml"></div>
+                <div *ngIf="!videoAbuse.video.deleted && !videoAbuse.video.blacklisted" [innerHTML]="videoAbuse.embedHtml"></div>
               </div>
             </div>
           </div>
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
new file mode 100644
index 000000000..09402fda7
--- /dev/null
+++ b/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.scss
@@ -0,0 +1,57 @@
+@import 'mixins';
+@import 'miniature';
+
+.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;
+
+    img {
+      height: 100%;
+      width: 100%;
+      border-radius: 2px;
+    }
+
+    span {
+      color: var(--inputPlaceholderColor);
+    }
+  }
+
+  .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%;
+    }
+  }
+}
diff --git a/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.ts b/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.ts
index 9858cbce2..cc5014ae8 100644
--- a/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.ts
+++ b/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.ts
@@ -20,14 +20,14 @@ import { VideoService } from '@app/shared/video/video.service'
 @Component({
   selector: 'my-video-abuse-list',
   templateUrl: './video-abuse-list.component.html',
-  styleUrls: [ '../moderation.component.scss']
+  styleUrls: [ '../moderation.component.scss', './video-abuse-list.component.scss' ]
 })
 export class VideoAbuseListComponent extends RestTable implements OnInit {
   @ViewChild('moderationCommentModal', { static: true }) moderationCommentModal: ModerationCommentModalComponent
 
   videoAbuses: (VideoAbuse & { moderationCommentHtml?: string, reasonHtml?: string })[] = []
   totalRecords = 0
-  rowsPerPageOptions = [ 20, 50, 100 ]
+  rowsPerPageOptions = [ 20, 50, 100 ]
   rowsPerPage = this.rowsPerPageOptions[0]
   sort: SortMeta = { field: 'createdAt', order: 1 }
   pagination: RestPagination = { count: this.rowsPerPage, start: 0 }
@@ -86,7 +86,7 @@ export class VideoAbuseListComponent extends RestTable implements OnInit {
         },
         {
           label: this.i18n('Blacklist video'),
-          isDisplayed: videoAbuse => !videoAbuse.video.deleted,
+          isDisplayed: videoAbuse => !videoAbuse.video.deleted && !videoAbuse.video.blacklisted,
           handler: videoAbuse => {
             this.videoBlacklistService.blacklistVideo(videoAbuse.video.id, undefined, true)
               .subscribe(
@@ -101,10 +101,29 @@ export class VideoAbuseListComponent extends RestTable implements OnInit {
           }
         },
         {
+          label: this.i18n('Unblacklist video'),
+          isDisplayed: videoAbuse => !videoAbuse.video.deleted && videoAbuse.video.blacklisted,
+          handler: videoAbuse => {
+            this.videoBlacklistService.removeVideoFromBlacklist(videoAbuse.video.id)
+              .subscribe(
+                () => {
+                  this.notifier.success(this.i18n('Video unblacklisted.'))
+
+                  this.updateVideoAbuseState(videoAbuse, VideoAbuseState.ACCEPTED)
+                },
+
+                err => this.notifier.error(err.message)
+              )
+          }
+        },
+        {
           label: this.i18n('Delete video'),
           isDisplayed: videoAbuse => !videoAbuse.video.deleted,
           handler: async videoAbuse => {
-            const res = await this.confirmService.confirm(this.i18n('Do you really want to delete this video?'), this.i18n('Delete'))
+            const res = await this.confirmService.confirm(
+              this.i18n('Do you really want to delete this video?'),
+              this.i18n('Delete')
+            )
             if (res === false) return
 
             this.videoService.removeVideo(videoAbuse.video.id)
@@ -126,14 +145,16 @@ export class VideoAbuseListComponent extends RestTable implements OnInit {
           isHeader: true
         },
         {
-          label: this.i18n('Mute reporter'),
+          label: this.i18n('Mute reporter'),
           handler: async videoAbuse => {
             const account = videoAbuse.reporterAccount as Account
 
             this.blocklistService.blockAccountByInstance(account)
               .subscribe(
                 () => {
-                  this.notifier.success(this.i18n('Account {{nameWithHost}} muted by the instance.', { nameWithHost: account.nameWithHost }))
+                  this.notifier.success(
+                    this.i18n('Account {{nameWithHost}} muted by the instance.', { nameWithHost: account.nameWithHost })
+                  )
 
                   account.mutedByInstance = true
                 },
@@ -141,6 +162,22 @@ export class VideoAbuseListComponent extends RestTable implements OnInit {
                 err => this.notifier.error(err.message)
               )
           }
+        },
+        {
+          label: this.i18n('Mute server'),
+          isDisplayed: videoAbuse => !videoAbuse.reporterAccount.userId,
+          handler: async videoAbuse => {
+            this.blocklistService.blockServerByInstance(videoAbuse.reporterAccount.host)
+              .subscribe(
+                () => {
+                  this.notifier.success(
+                    this.i18n('Server {{host}} muted by the instance.', { host: videoAbuse.reporterAccount.host })
+                  )
+                },
+
+                err => this.notifier.error(err.message)
+              )
+          }
         }
       ]
     ]