client/src/app/shared/shared-abuse-list/abuse-list-table.component.ts

   1 import * as debug from 'debug'
   2 import truncate from 'lodash-es/truncate'
   3 import { SortMeta } from 'primeng/api'
   4 import { buildVideoLink, buildVideoOrPlaylistEmbed } from 'src/assets/player/utils'
   5 import { environment } from 'src/environments/environment'
   6 import { AfterViewInit, Component, Input, OnInit, ViewChild } from '@angular/core'
   7 import { DomSanitizer } from '@angular/platform-browser'
   8 import { ActivatedRoute, Router } from '@angular/router'
   9 import { ConfirmService, MarkdownService, Notifier, RestPagination, RestTable } from '@app/core'
  10 import { Account, Actor, DropdownAction, Video, VideoService } from '@app/shared/shared-main'
  11 import { AbuseService, BlocklistService, VideoBlockService } from '@app/shared/shared-moderation'
  12 import { VideoCommentService } from '@app/shared/shared-video-comment'
  13 import { AbuseState, AdminAbuse } from '@shared/models'
  14 import { AbuseMessageModalComponent } from './abuse-message-modal.component'
  15 import { ModerationCommentModalComponent } from './moderation-comment-modal.component'
  16 import { ProcessedAbuse } from './processed-abuse.model'
  17
  18 const logger = debug('peertube:moderation:AbuseListTableComponent')
  19
  20 @Component({
  21   selector: 'my-abuse-list-table',
  22   templateUrl: './abuse-list-table.component.html',
  23   styleUrls: [ '../shared-moderation/moderation.scss', './abuse-list-table.component.scss' ]
  24 })
  25 export class AbuseListTableComponent extends RestTable implements OnInit, AfterViewInit {
  26   @Input() viewType: 'admin' | 'user'
  27   @Input() baseRoute: string
  28
  29   @ViewChild('abuseMessagesModal', { static: true }) abuseMessagesModal: AbuseMessageModalComponent
  30   @ViewChild('moderationCommentModal', { static: true }) moderationCommentModal: ModerationCommentModalComponent
  31
  32   abuses: ProcessedAbuse[] = []
  33   totalRecords = 0
  34   sort: SortMeta = { field: 'createdAt', order: 1 }
  35   pagination: RestPagination = { count: this.rowsPerPage, start: 0 }
  36
  37   abuseActions: DropdownAction<ProcessedAbuse>[][] = []
  38
  39   constructor (
  40     protected route: ActivatedRoute,
  41     protected router: Router,
  42     private notifier: Notifier,
  43     private abuseService: AbuseService,
  44     private blocklistService: BlocklistService,
  45     private commentService: VideoCommentService,
  46     private videoService: VideoService,
  47     private videoBlocklistService: VideoBlockService,
  48     private confirmService: ConfirmService,
  49     private markdownRenderer: MarkdownService,
  50     private sanitizer: DomSanitizer
  51   ) {
  52     super()
  53   }
  54
  55   ngOnInit () {
  56     this.abuseActions = [
  57       this.buildInternalActions(),
  58
  59       this.buildFlaggedAccountActions(),
  60
  61       this.buildCommentActions(),
  62
  63       this.buildVideoActions(),
  64
  65       this.buildAccountActions()
  66     ]
  67
  68     this.initialize()
  69     this.listenToSearchChange()
  70   }
  71
  72   ngAfterViewInit () {
  73     if (this.search) this.setTableFilter(this.search, false)
  74   }
  75
  76   isAdminView () {
  77     return this.viewType === 'admin'
  78   }
  79
  80   getIdentifier () {
  81     return 'AbuseListTableComponent'
  82   }
  83
  84   openModerationCommentModal (abuse: AdminAbuse) {
  85     this.moderationCommentModal.openModal(abuse)
  86   }
  87
  88   onModerationCommentUpdated () {
  89     this.loadData()
  90   }
  91
  92   isAbuseAccepted (abuse: AdminAbuse) {
  93     return abuse.state.id === AbuseState.ACCEPTED
  94   }
  95
  96   isAbuseRejected (abuse: AdminAbuse) {
  97     return abuse.state.id === AbuseState.REJECTED
  98   }
  99
 100   getVideoUrl (abuse: AdminAbuse) {
 101     return Video.buildClientUrl(abuse.video.uuid)
 102   }
 103
 104   getCommentUrl (abuse: AdminAbuse) {
 105     return Video.buildClientUrl(abuse.comment.video.uuid) + ';threadId=' + abuse.comment.threadId
 106   }
 107
 108   getAccountUrl (abuse: ProcessedAbuse) {
 109     return '/accounts/' + abuse.flaggedAccount.nameWithHost
 110   }
 111
 112   getVideoEmbed (abuse: AdminAbuse) {
 113     return buildVideoOrPlaylistEmbed(
 114       buildVideoLink({
 115         baseUrl: `${environment.originServerUrl}/videos/embed/${abuse.video.uuid}`,
 116         title: false,
 117         warningTitle: false,
 118         startTime: abuse.video.startAt,
 119         stopTime: abuse.video.endAt
 120       }),
 121       abuse.video.name
 122     )
 123   }
 124
 125   async removeAbuse (abuse: AdminAbuse) {
 126     const res = await this.confirmService.confirm($localize`Do you really want to delete this abuse report?`, $localize`Delete`)
 127     if (res === false) return
 128
 129     this.abuseService.removeAbuse(abuse).subscribe(
 130       () => {
 131         this.notifier.success($localize`Abuse deleted.`)
 132         this.loadData()
 133       },
 134
 135       err => this.notifier.error(err.message)
 136     )
 137   }
 138
 139   updateAbuseState (abuse: AdminAbuse, state: AbuseState) {
 140     this.abuseService.updateAbuse(abuse, { state })
 141       .subscribe(
 142         () => this.loadData(),
 143
 144         err => this.notifier.error(err.message)
 145       )
 146   }
 147
 148   onCountMessagesUpdated (event: { abuseId: number, countMessages: number }) {
 149     const abuse = this.abuses.find(a => a.id === event.abuseId)
 150
 151     if (!abuse) {
 152       console.error('Cannot find abuse %d.', event.abuseId)
 153       return
 154     }
 155
 156     abuse.countMessages = event.countMessages
 157   }
 158
 159   openAbuseMessagesModal (abuse: AdminAbuse) {
 160     this.abuseMessagesModal.openModal(abuse)
 161   }
 162
 163   isLocalAbuse (abuse: AdminAbuse) {
 164     if (this.viewType === 'user') return true
 165
 166     return Actor.IS_LOCAL(abuse.reporterAccount.host)
 167   }
 168
 169   protected loadData () {
 170     logger('Loading data.')
 171
 172     const options = {
 173       pagination: this.pagination,
 174       sort: this.sort,
 175       search: this.search
 176     }
 177
 178     const observable = this.viewType === 'admin'
 179       ? this.abuseService.getAdminAbuses(options)
 180       : this.abuseService.getUserAbuses(options)
 181
 182     return observable.subscribe(
 183         async resultList => {
 184           this.totalRecords = resultList.total
 185
 186           this.abuses = []
 187
 188           for (const a of resultList.data) {
 189             const abuse = a as ProcessedAbuse
 190
 191             abuse.reasonHtml = await this.toHtml(abuse.reason)
 192
 193             if (abuse.moderationComment) {
 194               abuse.moderationCommentHtml = await this.toHtml(abuse.moderationComment)
 195             }
 196
 197             if (abuse.video) {
 198               abuse.embedHtml = this.sanitizer.bypassSecurityTrustHtml(this.getVideoEmbed(abuse))
 199
 200               if (abuse.video.channel?.ownerAccount) {
 201                 abuse.video.channel.ownerAccount = new Account(abuse.video.channel.ownerAccount)
 202               }
 203             }
 204
 205             if (abuse.comment) {
 206               if (abuse.comment.deleted) {
 207                 abuse.truncatedCommentHtml = abuse.commentHtml = $localize`Deleted comment`
 208               } else {
 209                 const truncated = truncate(abuse.comment.text, { length: 100 })
 210                 abuse.truncatedCommentHtml = await this.markdownRenderer.textMarkdownToHTML(truncated, true)
 211                 abuse.commentHtml = await this.markdownRenderer.textMarkdownToHTML(abuse.comment.text, true)
 212               }
 213             }
 214
 215             if (abuse.reporterAccount) {
 216               abuse.reporterAccount = new Account(abuse.reporterAccount)
 217             }
 218
 219             if (abuse.flaggedAccount) {
 220               abuse.flaggedAccount = new Account(abuse.flaggedAccount)
 221             }
 222
 223             if (abuse.updatedAt === abuse.createdAt) delete abuse.updatedAt
 224
 225             this.abuses.push(abuse)
 226           }
 227         },
 228
 229         err => this.notifier.error(err.message)
 230       )
 231   }
 232
 233   private buildInternalActions (): DropdownAction<ProcessedAbuse>[] {
 234     return [
 235       {
 236         label: $localize`Internal actions`,
 237         isHeader: true
 238       },
 239       {
 240         label: this.isAdminView()
 241           ? $localize`Messages with reporter`
 242           : $localize`Messages with moderators`,
 243         handler: abuse => this.openAbuseMessagesModal(abuse),
 244         isDisplayed: abuse => this.isLocalAbuse(abuse)
 245       },
 246       {
 247         label: $localize`Update internal note`,
 248         handler: abuse => this.openModerationCommentModal(abuse),
 249         isDisplayed: abuse => this.isAdminView() && !!abuse.moderationComment
 250       },
 251       {
 252         label: $localize`Mark as accepted`,
 253         handler: abuse => this.updateAbuseState(abuse, AbuseState.ACCEPTED),
 254         isDisplayed: abuse => this.isAdminView() && !this.isAbuseAccepted(abuse)
 255       },
 256       {
 257         label: $localize`Mark as rejected`,
 258         handler: abuse => this.updateAbuseState(abuse, AbuseState.REJECTED),
 259         isDisplayed: abuse => this.isAdminView() && !this.isAbuseRejected(abuse)
 260       },
 261       {
 262         label: $localize`Add internal note`,
 263         handler: abuse => this.openModerationCommentModal(abuse),
 264         isDisplayed: abuse => this.isAdminView() && !abuse.moderationComment
 265       },
 266       {
 267         label: $localize`Delete report`,
 268         handler: abuse => this.isAdminView() && this.removeAbuse(abuse)
 269       }
 270     ]
 271   }
 272
 273   private buildFlaggedAccountActions (): DropdownAction<ProcessedAbuse>[] {
 274     if (!this.isAdminView()) return []
 275
 276     return [
 277       {
 278         label: $localize`Actions for the flagged account`,
 279         isHeader: true,
 280         isDisplayed: abuse => abuse.flaggedAccount && !abuse.comment && !abuse.video
 281       },
 282
 283       {
 284         label: $localize`Mute account`,
 285         isDisplayed: abuse => abuse.flaggedAccount && !abuse.comment && !abuse.video,
 286         handler: abuse => this.muteAccountHelper(abuse.flaggedAccount)
 287       },
 288
 289       {
 290         label: $localize`Mute server account`,
 291         isDisplayed: abuse => abuse.flaggedAccount && !abuse.comment && !abuse.video,
 292         handler: abuse => this.muteServerHelper(abuse.flaggedAccount.host)
 293       }
 294     ]
 295   }
 296
 297   private buildAccountActions (): DropdownAction<ProcessedAbuse>[] {
 298     if (!this.isAdminView()) return []
 299
 300     return [
 301       {
 302         label: $localize`Actions for the reporter`,
 303         isHeader: true,
 304         isDisplayed: abuse => !!abuse.reporterAccount
 305       },
 306
 307       {
 308         label: $localize`Mute reporter`,
 309         isDisplayed: abuse => !!abuse.reporterAccount,
 310         handler: abuse => this.muteAccountHelper(abuse.reporterAccount)
 311       },
 312
 313       {
 314         label: $localize`Mute server`,
 315         isDisplayed: abuse => abuse.reporterAccount && !abuse.reporterAccount.userId,
 316         handler: abuse => this.muteServerHelper(abuse.reporterAccount.host)
 317       }
 318     ]
 319   }
 320
 321   private buildVideoActions (): DropdownAction<ProcessedAbuse>[] {
 322     if (!this.isAdminView()) return []
 323
 324     return [
 325       {
 326         label: $localize`Actions for the video`,
 327         isHeader: true,
 328         isDisplayed: abuse => abuse.video && !abuse.video.deleted
 329       },
 330       {
 331         label: $localize`Block video`,
 332         isDisplayed: abuse => abuse.video && !abuse.video.deleted && !abuse.video.blacklisted,
 333         handler: abuse => {
 334           this.videoBlocklistService.blockVideo(abuse.video.id, undefined, abuse.video.channel.isLocal)
 335             .subscribe(
 336               () => {
 337                 this.notifier.success($localize`Video blocked.`)
 338
 339                 this.updateAbuseState(abuse, AbuseState.ACCEPTED)
 340               },
 341
 342               err => this.notifier.error(err.message)
 343             )
 344         }
 345       },
 346       {
 347         label: $localize`Unblock video`,
 348         isDisplayed: abuse => abuse.video && !abuse.video.deleted && abuse.video.blacklisted,
 349         handler: abuse => {
 350           this.videoBlocklistService.unblockVideo(abuse.video.id)
 351             .subscribe(
 352               () => {
 353                 this.notifier.success($localize`Video unblocked.`)
 354
 355                 this.updateAbuseState(abuse, AbuseState.ACCEPTED)
 356               },
 357
 358               err => this.notifier.error(err.message)
 359             )
 360         }
 361       },
 362       {
 363         label: $localize`Delete video`,
 364         isDisplayed: abuse => abuse.video && !abuse.video.deleted,
 365         handler: async abuse => {
 366           const res = await this.confirmService.confirm(
 367             $localize`Do you really want to delete this video?`,
 368             $localize`Delete`
 369           )
 370           if (res === false) return
 371
 372           this.videoService.removeVideo(abuse.video.id)
 373             .subscribe(
 374               () => {
 375                 this.notifier.success($localize`Video deleted.`)
 376
 377                 this.updateAbuseState(abuse, AbuseState.ACCEPTED)
 378               },
 379
 380               err => this.notifier.error(err.message)
 381             )
 382         }
 383       }
 384     ]
 385   }
 386
 387   private buildCommentActions (): DropdownAction<ProcessedAbuse>[] {
 388     if (!this.isAdminView()) return []
 389
 390     return [
 391       {
 392         label: $localize`Actions for the comment`,
 393         isHeader: true,
 394         isDisplayed: abuse => abuse.comment && !abuse.comment.deleted
 395       },
 396
 397       {
 398         label: $localize`Delete comment`,
 399         isDisplayed: abuse => abuse.comment && !abuse.comment.deleted,
 400         handler: async abuse => {
 401           const res = await this.confirmService.confirm(
 402             $localize`Do you really want to delete this comment?`,
 403             $localize`Delete`
 404           )
 405           if (res === false) return
 406
 407           this.commentService.deleteVideoComment(abuse.comment.video.id, abuse.comment.id)
 408             .subscribe(
 409               () => {
 410                 this.notifier.success($localize`Comment deleted.`)
 411
 412                 this.updateAbuseState(abuse, AbuseState.ACCEPTED)
 413               },
 414
 415               err => this.notifier.error(err.message)
 416             )
 417         }
 418       }
 419     ]
 420   }
 421
 422   private muteAccountHelper (account: Account) {
 423     this.blocklistService.blockAccountByInstance(account)
 424       .subscribe(
 425         () => {
 426           this.notifier.success($localize`Account ${account.nameWithHost} muted by the instance.`)
 427           account.mutedByInstance = true
 428         },
 429
 430         err => this.notifier.error(err.message)
 431       )
 432   }
 433
 434   private muteServerHelper (host: string) {
 435     this.blocklistService.blockServerByInstance(host)
 436       .subscribe(
 437         () => {
 438           this.notifier.success($localize`Server ${host} muted by the instance.`)
 439         },
 440
 441         err => this.notifier.error(err.message)
 442       )
 443   }
 444
 445   private toHtml (text: string) {
 446     return this.markdownRenderer.textMarkdownToHTML(text)
 447   }
 448 }