decouple video abuse details from embed, add embed to block list details

2 files changed, 38 insertions, 9 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 278e68a96..d39aacb76 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
@@ -57,12 +57,12 @@
       </td>
 
       <td>
-        <a [href]="getVideoUrl(videoBlock)" class="video-table-video-link" [title]="videoBlock.video.name" target="_blank" rel="noopener noreferrer">
-          <div class="video-table-video">
-            <div class="video-table-video-image">
+        <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="video-table-video-text">
+            <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 }}
@@ -97,8 +97,20 @@
     <tr>
       <td class="expand-cell" colspan="6">
         <div class="d-flex moderation-expanded">
-          <span class="col-2 moderation-expanded-label" i18n>Block reason:</span>
-          <span class="col-9 moderation-expanded-text" [innerHTML]="videoBlock.reasonHtml"></span>
+
+          <!-- block right part (block details) -->
+          <div class="col-8">
+            <span class="col-3 moderation-expanded-label" i18n>Block reason:</span>
+            <span class="col-9 moderation-expanded-text" [innerHTML]="videoBlock.reasonHtml"></span>
+          </div>
+
+          <!-- block right part (video embed) -->
+          <div class="col-4">
+            <div class="screenratio">
+              <div [innerHTML]="videoBlock.embedHtml"></div>
+            </div>
+          </div>
+
         </div>
       </td>
     </tr>
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 dfdf65c19..e94c293ca 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
@@ -7,14 +7,17 @@ import { DropdownAction, Video, VideoService } from '@app/shared/shared-main'
 import { VideoBlockService } from '@app/shared/shared-moderation'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { VideoBlacklist, VideoBlacklistType } from '@shared/models'
+import { buildVideoEmbed, buildVideoLink } from 'src/assets/player/utils'
+import { environment } from 'src/environments/environment'
+import { DomSanitizer } from '@angular/platform-browser'
 
 @Component({
   selector: 'my-video-block-list',
   templateUrl: './video-block-list.component.html',
-  styleUrls: [ '../../../shared/shared-moderation/moderation.scss', './video-block-list.component.scss' ]
+  styleUrls: [ '../../../shared/shared-moderation/moderation.scss', '../../../shared/shared-abuse-list/abuse-list-table.component.scss', './video-block-list.component.scss' ]
 })
 export class VideoBlockListComponent extends RestTable implements OnInit, AfterViewInit {
-  blocklist: (VideoBlacklist & { reasonHtml?: string })[] = []
+  blocklist: (VideoBlacklist & { reasonHtml?: string, embedHtml?: string })[] = []
   totalRecords = 0
   sort: SortMeta = { field: 'createdAt', order: -1 }
   pagination: RestPagination = { count: this.rowsPerPage, start: 0 }
@@ -28,6 +31,7 @@ export class VideoBlockListComponent extends RestTable implements OnInit, AfterV
     private confirmService: ConfirmService,
     private videoBlocklistService: VideoBlockService,
     private markdownRenderer: MarkdownService,
+    private sanitizer: DomSanitizer,
     private videoService: VideoService,
     private route: ActivatedRoute,
     private router: Router,
@@ -171,6 +175,16 @@ export class VideoBlockListComponent extends RestTable implements OnInit, AfterV
     )
   }
 
+  getVideoEmbed (entry: VideoBlacklist) {
+    return buildVideoEmbed(
+      buildVideoLink({
+        baseUrl: `${environment.embedUrl}/videos/embed/${entry.video.uuid}`,
+        title: false,
+        warningTitle: false
+      })
+    )
+  }
+
   protected loadData () {
     this.videoBlocklistService.listBlocks({
       pagination: this.pagination,
@@ -184,7 +198,10 @@ export class VideoBlockListComponent extends RestTable implements OnInit, AfterV
           this.blocklist = resultList.data
 
           for (const element of this.blocklist) {
-            Object.assign(element, { reasonHtml: await this.toHtml(element.reason) })
+            Object.assign(element, {
+              reasonHtml: await this.toHtml(element.reason),
+              embedHtml: this.sanitizer.bypassSecurityTrustHtml(this.getVideoEmbed(element))
+            })
           }
         },