predefined report reasons & improved reporter UI (#2842)

- added `startAt` and `endAt` optional timestamps to help pin down reported sections of a video
- added predefined report reasons
- added video player with report modal

1 files changed, 16 insertions, 0 deletions

diff --git a/client/src/app/+admin/moderation/video-abuse-list/video-abuse-details.component.html b/client/src/app/+admin/moderation/video-abuse-list/video-abuse-details.component.html
index 453a282d1..5512bb1de 100644
--- a/client/src/app/+admin/moderation/video-abuse-list/video-abuse-details.component.html
+++ b/client/src/app/+admin/moderation/video-abuse-list/video-abuse-details.component.html
@@ -57,6 +57,22 @@
       <span class="col-9 moderation-expanded-text" [innerHTML]="videoAbuse.reasonHtml"></span>
     </div>
 
+    <div *ngIf="getPredefinedReasons()" class="mt-2 d-flex">
+      <span class="col-3"></span>
+      <span class="col-9">
+        <a [routerLink]="[ '/admin/moderation/video-abuses/list' ]" [queryParams]="{ 'search': 'tag:' + reason.id  }" class="chip rectangular bg-secondary text-light" *ngFor="let reason of getPredefinedReasons()">
+          <div>{{ reason.label }}</div>
+        </a>
+      </span>
+    </div>
+
+    <div *ngIf="videoAbuse.startAt" class="mt-2 d-flex">
+      <span class="col-3 moderation-expanded-label" i18n>Reported part</span>
+      <span class="col-9">
+        {{ startAt }}<ng-container *ngIf="videoAbuse.endAt"> - {{ endAt }}</ng-container>
+      </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>