client/src/app/+admin/moderation/abuse-list/abuse-list.component.ts

   1 import { SortMeta } from 'primeng/api'
   2 import { buildVideoEmbed, buildVideoLink } from 'src/assets/player/utils'
   3 import { environment } from 'src/environments/environment'
   4 import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core'
   5 import { DomSanitizer } from '@angular/platform-browser'
   6 import { ActivatedRoute, Params, Router } from '@angular/router'
   7 import { ConfirmService, MarkdownService, Notifier, RestPagination, RestTable } from '@app/core'
   8 import { Account, Actor, DropdownAction, Video, VideoService } from '@app/shared/shared-main'
   9 import { AbuseService, BlocklistService, VideoBlockService } from '@app/shared/shared-moderation'
  10 import { I18n } from '@ngx-translate/i18n-polyfill'
  11 import { Abuse, AbuseState } from '@shared/models'
  12 import { ModerationCommentModalComponent } from './moderation-comment-modal.component'
  13
  14 export type ProcessedAbuse = Abuse & {
  15   moderationCommentHtml?: string,
  16   reasonHtml?: string
  17   embedHtml?: string
  18   updatedAt?: Date
  19
  20   // override bare server-side definitions with rich client-side definitions
  21   reporterAccount: Account
  22
  23   video: Abuse['video'] & {
  24     channel: Abuse['video']['channel'] & {
  25       ownerAccount: Account
  26     }
  27   }
  28 }
  29
  30 @Component({
  31   selector: 'my-abuse-list',
  32   templateUrl: './abuse-list.component.html',
  33   styleUrls: [ '../moderation.component.scss', './abuse-list.component.scss' ]
  34 })
  35 export class AbuseListComponent extends RestTable implements OnInit, AfterViewInit {
  36   @ViewChild('moderationCommentModal', { static: true }) moderationCommentModal: ModerationCommentModalComponent
  37
  38   abuses: ProcessedAbuse[] = []
  39   totalRecords = 0
  40   sort: SortMeta = { field: 'createdAt', order: 1 }
  41   pagination: RestPagination = { count: this.rowsPerPage, start: 0 }
  42
  43   abuseActions: DropdownAction<Abuse>[][] = []
  44
  45   constructor (
  46     private notifier: Notifier,
  47     private abuseService: AbuseService,
  48     private blocklistService: BlocklistService,
  49     private videoService: VideoService,
  50     private videoBlocklistService: VideoBlockService,
  51     private confirmService: ConfirmService,
  52     private i18n: I18n,
  53     private markdownRenderer: MarkdownService,
  54     private sanitizer: DomSanitizer,
  55     private route: ActivatedRoute,
  56     private router: Router
  57   ) {
  58     super()
  59
  60     this.abuseActions = [
  61       [
  62         {
  63           label: this.i18n('Internal actions'),
  64           isHeader: true
  65         },
  66         {
  67           label: this.i18n('Delete report'),
  68           handler: abuse => this.removeAbuse(abuse)
  69         },
  70         {
  71           label: this.i18n('Add note'),
  72           handler: abuse => this.openModerationCommentModal(abuse),
  73           isDisplayed: abuse => !abuse.moderationComment
  74         },
  75         {
  76           label: this.i18n('Update note'),
  77           handler: abuse => this.openModerationCommentModal(abuse),
  78           isDisplayed: abuse => !!abuse.moderationComment
  79         },
  80         {
  81           label: this.i18n('Mark as accepted'),
  82           handler: abuse => this.updateAbuseState(abuse, AbuseState.ACCEPTED),
  83           isDisplayed: abuse => !this.isAbuseAccepted(abuse)
  84         },
  85         {
  86           label: this.i18n('Mark as rejected'),
  87           handler: abuse => this.updateAbuseState(abuse, AbuseState.REJECTED),
  88           isDisplayed: abuse => !this.isAbuseRejected(abuse)
  89         }
  90       ],
  91       [
  92         {
  93           label: this.i18n('Actions for the video'),
  94           isHeader: true,
  95           isDisplayed: abuse => !abuse.video.deleted
  96         },
  97         {
  98           label: this.i18n('Block video'),
  99           isDisplayed: abuse => !abuse.video.deleted && !abuse.video.blacklisted,
 100           handler: abuse => {
 101             this.videoBlocklistService.blockVideo(abuse.video.id, undefined, true)
 102               .subscribe(
 103                 () => {
 104                   this.notifier.success(this.i18n('Video blocked.'))
 105
 106                   this.updateAbuseState(abuse, AbuseState.ACCEPTED)
 107                 },
 108
 109                 err => this.notifier.error(err.message)
 110               )
 111           }
 112         },
 113         {
 114           label: this.i18n('Unblock video'),
 115           isDisplayed: abuse => !abuse.video.deleted && abuse.video.blacklisted,
 116           handler: abuse => {
 117             this.videoBlocklistService.unblockVideo(abuse.video.id)
 118               .subscribe(
 119                 () => {
 120                   this.notifier.success(this.i18n('Video unblocked.'))
 121
 122                   this.updateAbuseState(abuse, AbuseState.ACCEPTED)
 123                 },
 124
 125                 err => this.notifier.error(err.message)
 126               )
 127           }
 128         },
 129         {
 130           label: this.i18n('Delete video'),
 131           isDisplayed: abuse => !abuse.video.deleted,
 132           handler: async abuse => {
 133             const res = await this.confirmService.confirm(
 134               this.i18n('Do you really want to delete this video?'),
 135               this.i18n('Delete')
 136             )
 137             if (res === false) return
 138
 139             this.videoService.removeVideo(abuse.video.id)
 140               .subscribe(
 141                 () => {
 142                   this.notifier.success(this.i18n('Video deleted.'))
 143
 144                   this.updateAbuseState(abuse, AbuseState.ACCEPTED)
 145                 },
 146
 147                 err => this.notifier.error(err.message)
 148               )
 149           }
 150         }
 151       ],
 152       [
 153         {
 154           label: this.i18n('Actions for the reporter'),
 155           isHeader: true
 156         },
 157         {
 158           label: this.i18n('Mute reporter'),
 159           handler: async abuse => {
 160             const account = abuse.reporterAccount as Account
 161
 162             this.blocklistService.blockAccountByInstance(account)
 163               .subscribe(
 164                 () => {
 165                   this.notifier.success(
 166                     this.i18n('Account {{nameWithHost}} muted by the instance.', { nameWithHost: account.nameWithHost })
 167                   )
 168
 169                   account.mutedByInstance = true
 170                 },
 171
 172                 err => this.notifier.error(err.message)
 173               )
 174           }
 175         },
 176         {
 177           label: this.i18n('Mute server'),
 178           isDisplayed: abuse => !abuse.reporterAccount.userId,
 179           handler: async abuse => {
 180             this.blocklistService.blockServerByInstance(abuse.reporterAccount.host)
 181               .subscribe(
 182                 () => {
 183                   this.notifier.success(
 184                     this.i18n('Server {{host}} muted by the instance.', { host: abuse.reporterAccount.host })
 185                   )
 186                 },
 187
 188                 err => this.notifier.error(err.message)
 189               )
 190           }
 191         }
 192       ]
 193     ]
 194   }
 195
 196   ngOnInit () {
 197     this.initialize()
 198
 199     this.route.queryParams
 200       .subscribe(params => {
 201         this.search = params.search || ''
 202
 203         this.setTableFilter(this.search)
 204         this.loadData()
 205       })
 206   }
 207
 208   ngAfterViewInit () {
 209     if (this.search) this.setTableFilter(this.search)
 210   }
 211
 212   getIdentifier () {
 213     return 'AbuseListComponent'
 214   }
 215
 216   openModerationCommentModal (abuse: Abuse) {
 217     this.moderationCommentModal.openModal(abuse)
 218   }
 219
 220   onModerationCommentUpdated () {
 221     this.loadData()
 222   }
 223
 224   /* Table filter functions */
 225   onAbuseSearch (event: Event) {
 226     this.onSearch(event)
 227     this.setQueryParams((event.target as HTMLInputElement).value)
 228   }
 229
 230   setQueryParams (search: string) {
 231     const queryParams: Params = {}
 232     if (search) Object.assign(queryParams, { search })
 233
 234     this.router.navigate([ '/admin/moderation/video-abuses/list' ], { queryParams })
 235   }
 236
 237   resetTableFilter () {
 238     this.setTableFilter('')
 239     this.setQueryParams('')
 240     this.resetSearch()
 241   }
 242   /* END Table filter functions */
 243
 244   isAbuseAccepted (abuse: Abuse) {
 245     return abuse.state.id === AbuseState.ACCEPTED
 246   }
 247
 248   isAbuseRejected (abuse: Abuse) {
 249     return abuse.state.id === AbuseState.REJECTED
 250   }
 251
 252   getVideoUrl (abuse: Abuse) {
 253     return Video.buildClientUrl(abuse.video.uuid)
 254   }
 255
 256   getVideoEmbed (abuse: Abuse) {
 257     return buildVideoEmbed(
 258       buildVideoLink({
 259         baseUrl: `${environment.embedUrl}/videos/embed/${abuse.video.uuid}`,
 260         title: false,
 261         warningTitle: false,
 262         startTime: abuse.startAt,
 263         stopTime: abuse.endAt
 264       })
 265     )
 266   }
 267
 268   switchToDefaultAvatar ($event: Event) {
 269     ($event.target as HTMLImageElement).src = Actor.GET_DEFAULT_AVATAR_URL()
 270   }
 271
 272   async removeAbuse (abuse: Abuse) {
 273     const res = await this.confirmService.confirm(this.i18n('Do you really want to delete this abuse report?'), this.i18n('Delete'))
 274     if (res === false) return
 275
 276     this.abuseService.removeAbuse(abuse).subscribe(
 277       () => {
 278         this.notifier.success(this.i18n('Abuse deleted.'))
 279         this.loadData()
 280       },
 281
 282       err => this.notifier.error(err.message)
 283     )
 284   }
 285
 286   updateAbuseState (abuse: Abuse, state: AbuseState) {
 287     this.abuseService.updateAbuse(abuse, { state })
 288       .subscribe(
 289         () => this.loadData(),
 290
 291         err => this.notifier.error(err.message)
 292       )
 293   }
 294
 295   protected loadData () {
 296     return this.abuseService.getAbuses({
 297       pagination: this.pagination,
 298       sort: this.sort,
 299       search: this.search
 300     }).subscribe(
 301         async resultList => {
 302           this.totalRecords = resultList.total
 303           const abuses = []
 304
 305           for (const abuse of resultList.data) {
 306             Object.assign(abuse, {
 307               reasonHtml: await this.toHtml(abuse.reason),
 308               moderationCommentHtml: await this.toHtml(abuse.moderationComment),
 309               embedHtml: this.sanitizer.bypassSecurityTrustHtml(this.getVideoEmbed(abuse)),
 310               reporterAccount: new Account(abuse.reporterAccount)
 311             })
 312
 313             if (abuse.video.channel?.ownerAccount) abuse.video.channel.ownerAccount = new Account(abuse.video.channel.ownerAccount)
 314             if (abuse.updatedAt === abuse.createdAt) delete abuse.updatedAt
 315
 316             abuses.push(abuse as ProcessedAbuse)
 317           }
 318
 319           this.abuses = abuses
 320         },
 321
 322         err => this.notifier.error(err.message)
 323       )
 324   }
 325
 326   private toHtml (text: string) {
 327     return this.markdownRenderer.textMarkdownToHTML(text)
 328   }
 329 }