Add videos list admin component

2 files changed, 10 insertions, 32 deletions

diff --git a/client/src/app/+admin/moderation/video-block-list/video-block-list.component.html b/client/src/app/+admin/moderation/video-block-list/video-block-list.component.html
index 7efa87dd0..3cd69cfbc 100644
--- a/client/src/app/+admin/moderation/video-block-list/video-block-list.component.html
+++ b/client/src/app/+admin/moderation/video-block-list/video-block-list.component.html
@@ -34,9 +34,7 @@
     <tr>
       <td *ngIf="!videoBlock.reason"></td>
       <td *ngIf="videoBlock.reason" class="expand-cell c-hand" [pRowToggler]="videoBlock" i18n-ngbTooltip ngbTooltip="More information" placement="top-left" container="body">
-        <span class="expander">
-          <i [ngClass]="expanded ? 'glyphicon glyphicon-menu-down' : 'glyphicon glyphicon-menu-right'"></i>
-        </span>
+        <my-table-expander-icon [expanded]="expanded"></my-table-expander-icon>
       </td>
 
       <td class="action-cell">
@@ -47,22 +45,11 @@
       </td>
 
       <td>
-        <a [href]="getVideoUrl(videoBlock)" class="table-video-link" [title]="videoBlock.video.name" target="_blank" rel="noopener noreferrer">
-          <div class="table-video">
-            <div class="table-video-image">
-              <img [src]="videoBlock.video.thumbnailPath">
-            </div>
-
-            <div class="table-video-text">
-              <div>
-                <my-global-icon i18n-title title="The video was blocked due to automatic blocking of new videos" *ngIf="videoBlock.type === 2" iconName="robot"></my-global-icon>
-                {{ videoBlock.video.name }}
-              </div>
-
-              <div class="text-muted">by {{ videoBlock.video.channel?.displayName }} on {{ videoBlock.video.channel?.host }} </div>
-            </div>
-          </div>
-        </a>
+        <my-video-cell [video]="videoBlock.video">
+          <span name>
+            <my-global-icon *ngIf="videoBlock.type === 2" i18n-title title="The video was blocked due to automatic blocking of new videos" iconName="robot"></my-global-icon>
+          </span>
+        </my-video-cell>
       </td>
 
       <td>
@@ -90,9 +77,7 @@
           </div>
 
           <div class="right">
-            <div class="screenratio">
-              <div [innerHTML]="videoBlock.embedHtml"></div>
-            </div>
+            <my-embed [video]="videoBlock.video"></my-embed>
           </div>
 
         </div>
diff --git a/client/src/app/+admin/moderation/video-block-list/video-block-list.component.ts b/client/src/app/+admin/moderation/video-block-list/video-block-list.component.ts
index 7baf34ca2..1fe8d0f9d 100644
--- a/client/src/app/+admin/moderation/video-block-list/video-block-list.component.ts
+++ b/client/src/app/+admin/moderation/video-block-list/video-block-list.component.ts
@@ -3,11 +3,10 @@ import { switchMap } from 'rxjs/operators'
 import { buildVideoOrPlaylistEmbed } from 'src/assets/player/utils'
 import { environment } from 'src/environments/environment'
 import { Component, OnInit } from '@angular/core'
-import { DomSanitizer } from '@angular/platform-browser'
 import { ActivatedRoute, Router } from '@angular/router'
 import { ConfirmService, MarkdownService, Notifier, RestPagination, RestTable, ServerService } from '@app/core'
 import { AdvancedInputFilter } from '@app/shared/shared-forms'
-import { DropdownAction, Video, VideoService } from '@app/shared/shared-main'
+import { DropdownAction, VideoService } from '@app/shared/shared-main'
 import { VideoBlockService } from '@app/shared/shared-moderation'
 import { buildVideoEmbedLink, decorateVideoLink } from '@shared/core-utils'
 import { VideoBlacklist, VideoBlacklistType } from '@shared/models'
@@ -18,7 +17,7 @@ import { VideoBlacklist, VideoBlacklistType } from '@shared/models'
   styleUrls: [ '../../../shared/shared-moderation/moderation.scss', './video-block-list.component.scss' ]
 })
 export class VideoBlockListComponent extends RestTable implements OnInit {
-  blocklist: (VideoBlacklist & { reasonHtml?: string, embedHtml?: string })[] = []
+  blocklist: (VideoBlacklist & { reasonHtml?: string })[] = []
   totalRecords = 0
   sort: SortMeta = { field: 'createdAt', order: -1 }
   pagination: RestPagination = { count: this.rowsPerPage, start: 0 }
@@ -50,7 +49,6 @@ export class VideoBlockListComponent extends RestTable implements OnInit {
     private confirmService: ConfirmService,
     private videoBlocklistService: VideoBlockService,
     private markdownRenderer: MarkdownService,
-    private sanitizer: DomSanitizer,
     private videoService: VideoService
   ) {
     super()
@@ -125,10 +123,6 @@ export class VideoBlockListComponent extends RestTable implements OnInit {
     return 'VideoBlockListComponent'
   }
 
-  getVideoUrl (videoBlock: VideoBlacklist) {
-    return Video.buildWatchUrl(videoBlock.video)
-  }
-
   toHtml (text: string) {
     return this.markdownRenderer.textMarkdownToHTML(text)
   }
@@ -176,8 +170,7 @@ export class VideoBlockListComponent extends RestTable implements OnInit {
 
           for (const element of this.blocklist) {
             Object.assign(element, {
-              reasonHtml: await this.toHtml(element.reason),
-              embedHtml: this.sanitizer.bypassSecurityTrustHtml(this.getVideoEmbed(element))
+              reasonHtml: await this.toHtml(element.reason)
             })
           }
         },