From 801d957155d574bda984206021cdd1fe58ef56b9 Mon Sep 17 00:00:00 2001
From: Rigel Kent <sendmemail@rigelk.eu>
Date: Sun, 3 May 2020 16:24:12 +0200
Subject: Move abuse-list details into its own component

---
 .../video-abuse-details.component.html             | 77 ++++++++++++++++++++++
 1 file changed, 77 insertions(+)
 create mode 100644 client/src/app/+admin/moderation/video-abuse-list/video-abuse-details.component.html

(limited to 'client/src/app/+admin/moderation/video-abuse-list/video-abuse-details.component.html')

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
new file mode 100644
index 000000000..704d43ac4
--- /dev/null
+++ b/client/src/app/+admin/moderation/video-abuse-list/video-abuse-details.component.html
@@ -0,0 +1,77 @@
+<div class="d-flex moderation-expanded">
+  <!-- report left part (report details) -->
+  <div class="col-8">
+
+    <!-- report metadata -->
+    <div class="d-flex">
+      <span class="col-3 moderation-expanded-label" i18n>Reporter</span>
+      <span class="col-9 moderation-expanded-text">
+        <a [routerLink]="[ '/admin/moderation/video-abuses/list' ]" [queryParams]="{ 'search': 'reporter:&quot;' + videoAbuse.reporterAccount.displayName + '&quot;' }" class="chip">
+          <img
+            class="avatar"
+            [src]="videoAbuse.reporterAccount.avatar.path"
+            (error)="switchToDefaultAvatar($event)"
+            alt="Avatar"
+          >
+          <div>
+            <span class="text-muted">{{ createByString(videoAbuse.reporterAccount) }}</span>
+          </div>
+        </a>
+        <a [routerLink]="[ '/admin/moderation/video-abuses/list' ]" [queryParams]="{ 'search': 'reportee:&quot;' + videoAbuse.reporterAccount.displayName + '&quot;' }" class="ml-auto text-muted video-details-links" i18n>
+          {videoAbuse.countReportsForReporter, plural, =1 {1 report} other {{{ videoAbuse.countReportsForReporter }} reports}}<span class="ml-1 glyphicon glyphicon-flag"></span>
+        </a>
+      </span>
+    </div>
+
+    <div class="d-flex">
+      <span class="col-3 moderation-expanded-label" i18n>Reportee</span>
+      <span class="col-9 moderation-expanded-text">
+        <a [routerLink]="[ '/admin/moderation/video-abuses/list' ]" [queryParams]="{ 'search': 'reportee:&quot;' +videoAbuse.video.channel.ownerAccount.displayName + '&quot;' }" class="chip">
+          <img
+            class="avatar"
+            [src]="videoAbuse.video.channel.ownerAccount?.avatar.path"
+            (error)="switchToDefaultAvatar($event)"
+            alt="Avatar"
+          >
+          <div>
+            <span class="text-muted">{{ videoAbuse.video.channel.ownerAccount ? createByString(videoAbuse.video.channel.ownerAccount) : '' }}</span>
+          </div>
+        </a>
+        <a [routerLink]="[ '/admin/moderation/video-abuses/list' ]" [queryParams]="{ 'search': 'reportee:&quot;' +videoAbuse.video.channel.ownerAccount.displayName + '&quot;' }" class="ml-auto text-muted video-details-links" i18n>
+          {videoAbuse.countReportsForReportee, plural, =1 {1 report} other {{{ videoAbuse.countReportsForReportee }} reports}}<span class="ml-1 glyphicon glyphicon-flag"></span>
+        </a>
+      </span>
+    </div>
+
+    <div class="d-flex" *ngIf="videoAbuse.updatedAt">
+      <span class="col-3 moderation-expanded-label" i18n>Updated</span>
+      <time class="col-9 moderation-expanded-text video-details-date-updated">{{ videoAbuse.updatedAt | date: 'medium' }}</time>
+    </div>
+
+    <!-- report text -->
+    <div class="mt-3 d-flex">
+      <span class="col-3 moderation-expanded-label">
+        <ng-container i18n>Report</ng-container>
+        <a [routerLink]="[ '/admin/moderation/video-abuses/list' ]" [queryParams]="{ 'search': '#' + videoAbuse.id  }" class="ml-1 text-muted">#{{ videoAbuse.id }}</a>
+      </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>
+
+  <!-- report right part (video details) -->
+  <div class="col-4">
+    <div class="screenratio">
+      <div *ngIf="videoAbuse.video.deleted || videoAbuse.video.blacklisted">
+        <span i18n *ngIf="videoAbuse.video.deleted">The video was deleted</span>
+        <span i18n *ngIf="!videoAbuse.video.deleted">The video was blacklisted</span>
+      </div>
+      <div *ngIf="!videoAbuse.video.deleted && !videoAbuse.video.blacklisted" [innerHTML]="videoAbuse.embedHtml"></div>
+    </div>
+  </div>
+</div>
\ No newline at end of file
-- 
cgit v1.2.3