Rich reporter field and video embed in moderation abuse list

4 files changed, 84 insertions, 23 deletions

diff --git a/client/src/app/+admin/moderation/moderation.component.scss b/client/src/app/+admin/moderation/moderation.component.scss
index 13b019c5b..89e9b47d3 100644
--- a/client/src/app/+admin/moderation/moderation.component.scss
+++ b/client/src/app/+admin/moderation/moderation.component.scss
@@ -8,18 +8,35 @@
 
 .moderation-expanded-label {
   font-weight: $font-semibold;
-  min-width: 200px;
   display: inline-block;
   vertical-align: top;
+  text-align: right;
 }
 
 .moderation-expanded-text {
   display: inline-block;
+  word-wrap: break-word;
+
+  ::ng-deep p:last-child {
+    margin-bottom: 0px !important;
+  }
 }
 
-.moderation-expanded {
-  word-wrap: break-word;
-  overflow: visible !important;
-  text-overflow: unset !important;
-  white-space: unset !important;
+.screenratio {
+  position: relative;
+  width: 100%;
+  height: 0;
+  padding-bottom: 56%;
+
+  ::ng-deep iframe {
+    position: absolute;
+    width: 100% !important;
+    height: 100% !important;
+    left: 0;
+    top: 0;
+  }
+}
+
+.chip {
+  @include chip;
 }
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 cf7b61d2a..155d10dda 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
@@ -24,8 +24,19 @@
       </td>
 
       <td>
-        <a [href]="videoAbuse.reporterAccount.url" i18n-title title="Go to the account" target="_blank" rel="noopener noreferrer">
-          {{ createByString(videoAbuse.reporterAccount) }}
+        <a [href]="videoAbuse.reporterAccount.url" i18n-title title="Open account in a new tab" target="_blank" rel="noopener noreferrer">
+          <div class="chip two-lines">
+            <img
+              class="avatar"
+              [src]="videoAbuse.reporterAccount.avatar.path"
+              (error)="switchToDefaultAvatar($event)"
+              alt="Avatar"
+            >
+            <div>
+              {{ videoAbuse.reporterAccount.displayName }}
+              <span class="text-muted">{{ createByString(videoAbuse.reporterAccount) }}</span>
+            </div>
+          </div>
         </a>
       </td>
 
@@ -50,14 +61,22 @@
 
   <ng-template pTemplate="rowexpansion" let-videoAbuse>
       <tr>
-        <td class="moderation-expanded" colspan="6">
-          <div>
-            <span i18n class="moderation-expanded-label">Reason:</span>
-            <span class="moderation-expanded-text" [innerHTML]="videoAbuse.reasonHtml"></span>
-          </div>
-          <div *ngIf="videoAbuse.moderationComment">
-            <span i18n class="moderation-expanded-label">Moderation comment:</span>
-            <span class="moderation-expanded-text" [innerHTML]="videoAbuse.moderationCommentHtml"></span>
+        <td class="expand-cell" colspan="6">
+          <div class="d-flex">
+            <div class="col-8">
+              <div class="d-flex">
+                <span class="col-3 moderation-expanded-label" i18n>Reason:</span>
+                <span class="col-9 moderation-expanded-text" [innerHTML]="videoAbuse.reasonHtml"></span>
+              </div>
+              <div class="mt-3 d-flex" *ngIf="videoAbuse.moderationComment">
+                <span class="col-3 moderation-expanded-label" i18n>Note:</span>
+                <span class="col-9 moderation-expanded-text" [innerHTML]="videoAbuse.moderationCommentHtml"></span>
+              </div>
+            </div>
+  
+            <div class="col-4">
+              <div class="screenratio" [innerHTML]="videoAbuse.embedHtml"></div>
+            </div>
           </div>
         </td>
       </tr>
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 2d991aae9..b135792a7 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
@@ -10,6 +10,10 @@ import { ConfirmService } from '../../../core/index'
 import { ModerationCommentModalComponent } from './moderation-comment-modal.component'
 import { Video } from '../../../shared/video/video.model'
 import { MarkdownService } from '@app/shared/renderer'
+import { Actor } from '@app/shared/actor/actor.model'
+import { buildVideoLink, buildVideoEmbed } from 'src/assets/player/utils'
+import { getAbsoluteAPIUrl } from '@app/shared/misc/utils'
+import { DomSanitizer } from '@angular/platform-browser'
 
 @Component({
   selector: 'my-video-abuse-list',
@@ -32,7 +36,8 @@ export class VideoAbuseListComponent extends RestTable implements OnInit {
     private videoAbuseService: VideoAbuseService,
     private confirmService: ConfirmService,
     private i18n: I18n,
-    private markdownRenderer: MarkdownService
+    private markdownRenderer: MarkdownService,
+    private sanitizer: DomSanitizer
   ) {
     super()
 
@@ -42,8 +47,14 @@ export class VideoAbuseListComponent extends RestTable implements OnInit {
         handler: videoAbuse => this.removeVideoAbuse(videoAbuse)
       },
       {
-        label: this.i18n('Update moderation comment'),
-        handler: videoAbuse => this.openModerationCommentModal(videoAbuse)
+        label: this.i18n('Add note'),
+        handler: videoAbuse => this.openModerationCommentModal(videoAbuse),
+        isDisplayed: videoAbuse => !videoAbuse.moderationComment
+      },
+      {
+        label: this.i18n('Update note'),
+        handler: videoAbuse => this.openModerationCommentModal(videoAbuse),
+        isDisplayed: videoAbuse => !!videoAbuse.moderationComment
       },
       {
         label: this.i18n('Mark as accepted'),
@@ -90,6 +101,19 @@ export class VideoAbuseListComponent extends RestTable implements OnInit {
     return Video.buildClientUrl(videoAbuse.video.uuid)
   }
 
+  getVideoEmbed (videoAbuse: VideoAbuse) {
+    const absoluteAPIUrl = 'http://localhost:9000' || getAbsoluteAPIUrl()
+    const embedUrl = buildVideoLink({
+      baseUrl: absoluteAPIUrl + '/videos/embed/' + videoAbuse.video.uuid,
+      warningTitle: false
+    })
+    return buildVideoEmbed(embedUrl)
+  }
+
+  switchToDefaultAvatar ($event: Event) {
+    ($event.target as HTMLImageElement).src = Actor.GET_DEFAULT_AVATAR_URL()
+  }
+
   async removeVideoAbuse (videoAbuse: VideoAbuse) {
     const res = await this.confirmService.confirm(this.i18n('Do you really want to delete this abuse report?'), this.i18n('Delete'))
     if (res === false) return
@@ -125,7 +149,8 @@ export class VideoAbuseListComponent extends RestTable implements OnInit {
                    for (const abuse of this.videoAbuses) {
                      Object.assign(abuse, {
                        reasonHtml: await this.toHtml(abuse.reason),
-                       moderationCommentHtml: await this.toHtml(abuse.moderationComment)
+                       moderationCommentHtml: await this.toHtml(abuse.moderationComment),
+                       embedHtml: this.sanitizer.bypassSecurityTrustHtml(this.getVideoEmbed(abuse))
                      })
                    }
 
diff --git a/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.html b/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.html
index a39e7639e..320172e37 100644
--- a/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.html
+++ b/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.html
@@ -42,9 +42,9 @@
 
   <ng-template pTemplate="rowexpansion" let-videoBlacklist>
     <tr>
-      <td class="moderation-expanded" colspan="6">
-        <span i18n class="moderation-expanded-label">Blacklist reason:</span>
-        <span class="moderation-expanded-text" [innerHTML]="videoBlacklist.reasonHtml"></span>
+      <td class="expand-cell" colspan="6">
+        <span class="col-2 moderation-expanded-label" i18n>Blacklist reason:</span>
+        <span class="col-9 moderation-expanded-text" [innerHTML]="videoBlacklist.reasonHtml"></span>
       </td>
     </tr>
   </ng-template>