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

[github/Chocobozzz/PeerTube.git] / client / src / app / +admin / moderation / video-block-list / video-block-list.component.html

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 f3ec373146c6525e6718fe10026eacc931f459bb..d39aacb76a686953bba930e599ba415540a3af0d 100644 (file)
--- 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
@@ -1,3 +1,8 @@
+<h1>
+  <my-global-icon iconName="cross" aria-hidden="true"></my-global-icon>
+  <ng-container i18n>Video blocks</ng-container>
+</h1>
+
 <p-table
   [value]="blocklist" [lazy]="true" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [rowsPerPageOptions]="rowsPerPageOptions"
   [sortField]="sort.field" [sortOrder]="sort.order" (onLazyLoad)="loadLazy($event)" dataKey="id"
@@ -52,12 +57,12 @@
       </td>
 
       <td>
-        <a [href]="getVideoUrl(videoBlock)" 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">
+        <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 }}
@@ -92,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>
@@ -102,7 +119,7 @@
   <ng-template pTemplate="emptymessage">
     <tr>
       <td colspan="6">
-        <div class="empty-table-message">
+        <div class="no-results">
           <ng-container *ngIf="search" i18n>No blocked video found matching current filters.</ng-container>
           <ng-container *ngIf="!search" i18n>No blocked video found.</ng-container>
         </div>