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

4 files changed, 77 insertions, 9 deletions

diff --git a/client/src/app/+admin/moderation/moderation.component.scss b/client/src/app/+admin/moderation/moderation.component.scss
index ba68cf6f6..0ec420af9 100644
--- a/client/src/app/+admin/moderation/moderation.component.scss
+++ b/client/src/app/+admin/moderation/moderation.component.scss
@@ -42,6 +42,20 @@
   }
 }
 
+p-calendar {
+  display: block;
+
+  ::ng-deep {
+    .ui-widget-content {
+      min-width: 400px;
+    }
+
+    input {
+      @include peertube-input-text(100%);
+    }
+  }
+}
+
 .screenratio {
   div {
     @include miniature-thumbnail;
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>
diff --git a/client/src/app/+admin/moderation/video-abuse-list/video-abuse-details.component.ts b/client/src/app/+admin/moderation/video-abuse-list/video-abuse-details.component.ts
index d9cb19845..13485124f 100644
--- a/client/src/app/+admin/moderation/video-abuse-list/video-abuse-details.component.ts
+++ b/client/src/app/+admin/moderation/video-abuse-list/video-abuse-details.component.ts
@@ -1,7 +1,9 @@
 import { Component, Input } from '@angular/core'
-import { Account } from '@app/shared/account/account.model'
 import { Actor } from '@app/shared/actor/actor.model'
+import { VideoAbusePredefinedReasonsString } from '../../../../../../shared/models/videos/abuse/video-abuse-reason.model'
 import { ProcessedVideoAbuse } from './video-abuse-list.component'
+import { I18n } from '@ngx-translate/i18n-polyfill'
+import { durationToString } from '@app/shared/misc/utils'
 
 @Component({
   selector: 'my-video-abuse-details',
@@ -11,6 +13,39 @@ import { ProcessedVideoAbuse } from './video-abuse-list.component'
 export class VideoAbuseDetailsComponent {
   @Input() videoAbuse: ProcessedVideoAbuse
 
+  private predefinedReasonsTranslations: { [key in VideoAbusePredefinedReasonsString]: string }
+
+  constructor (
+    private i18n: I18n
+  ) {
+    this.predefinedReasonsTranslations = {
+      violentOrRepulsive: this.i18n('Violent or Repulsive'),
+      hatefulOrAbusive: this.i18n('Hateful or Abusive'),
+      spamOrMisleading: this.i18n('Spam or Misleading'),
+      privacy: this.i18n('Privacy'),
+      rights: this.i18n('Rights'),
+      serverRules: this.i18n('Server rules'),
+      thumbnails: this.i18n('Thumbnails'),
+      captions: this.i18n('Captions')
+    }
+  }
+
+  get startAt () {
+    return durationToString(this.videoAbuse.startAt)
+  }
+
+  get endAt () {
+    return durationToString(this.videoAbuse.endAt)
+  }
+
+  getPredefinedReasons () {
+    if (!this.videoAbuse.predefinedReasons) return []
+    return this.videoAbuse.predefinedReasons.map(r => ({
+      id: r,
+      label: this.predefinedReasonsTranslations[r]
+    }))
+  }
+
   switchToDefaultAvatar ($event: Event) {
     ($event.target as HTMLImageElement).src = Actor.GET_DEFAULT_AVATAR_URL()
   }
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 a36acc2ab..d7f5beef3 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
@@ -11,13 +11,13 @@ import { ModerationCommentModalComponent } from './moderation-comment-modal.comp
 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 { buildVideoEmbed, buildVideoLink } from 'src/assets/player/utils'
 import { DomSanitizer } from '@angular/platform-browser'
 import { BlocklistService } from '@app/shared/blocklist'
 import { VideoService } from '@app/shared/video/video.service'
 import { ActivatedRoute, Params, Router } from '@angular/router'
 import { filter } from 'rxjs/operators'
+import { environment } from 'src/environments/environment'
 
 export type ProcessedVideoAbuse = VideoAbuse & {
   moderationCommentHtml?: string,
@@ -259,12 +259,15 @@ export class VideoAbuseListComponent extends RestTable implements OnInit, AfterV
   }
 
   getVideoEmbed (videoAbuse: VideoAbuse) {
-    const absoluteAPIUrl = getAbsoluteAPIUrl()
-    const embedUrl = buildVideoLink({
-      baseUrl: absoluteAPIUrl + '/videos/embed/' + videoAbuse.video.uuid,
-      warningTitle: false
-    })
-    return buildVideoEmbed(embedUrl)
+    return buildVideoEmbed(
+      buildVideoLink({
+        baseUrl: `${environment.embedUrl}/videos/embed/${videoAbuse.video.uuid}`,
+        title: false,
+        warningTitle: false,
+        startTime: videoAbuse.startAt,
+        stopTime: videoAbuse.endAt
+      })
+    )
   }
 
   switchToDefaultAvatar ($event: Event) {