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)
  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     )
 122   }
 123
 124   switchToDefaultAvatar ($event: Event) {
 125     ($event.target as HTMLImageElement).src = Account.GET_DEFAULT_AVATAR_URL()
 126   }
 127
 128   async removeAbuse (abuse: AdminAbuse) {
 129     const res = await this.confirmService.confirm($localize`Do you really want to delete this abuse report?`, $localize`Delete`)
 130     if (res === false) return
 131
 132     this.abuseService.removeAbuse(abuse).subscribe(
 133       () => {
 134         this.notifier.success($localize`Abuse deleted.`)
 135         this.loadData()
 136       },
 137
 138       err => this.notifier.error(err.message)
 139     )
 140   }
 141
 142   updateAbuseState (abuse: AdminAbuse, state: AbuseState) {
 143     this.abuseService.updateAbuse(abuse, { state })
 144       .subscribe(
 145         () => this.loadData(),
 146
 147         err => this.notifier.error(err.message)
 148       )
 149   }
 150
 151   onCountMessagesUpdated (event: { abuseId: number, countMessages: number }) {
 152     const abuse = this.abuses.find(a => a.id === event.abuseId)
 153
 154     if (!abuse) {
 155       console.error('Cannot find abuse %d.', event.abuseId)
 156       return
 157     }
 158
 159     abuse.countMessages = event.countMessages
 160   }
 161
 162   openAbuseMessagesModal (abuse: AdminAbuse) {
 163     this.abuseMessagesModal.openModal(abuse)
 164   }
 165
 166   isLocalAbuse (abuse: AdminAbuse) {
 167     if (this.viewType === 'user') return true
 168
 169     return Actor.IS_LOCAL(abuse.reporterAccount.host)
 170   }
 171
 172   protected loadData () {
 173     logger('Loading data.')
 174
 175     const options = {
 176       pagination: this.pagination,
 177       sort: this.sort,
 178       search: this.search
 179     }
 180
 181     const observable = this.viewType === 'admin'
 182       ? this.abuseService.getAdminAbuses(options)
 183       : this.abuseService.getUserAbuses(options)
 184
 185     return observable.subscribe(
 186         async resultList => {
 187           this.totalRecords = resultList.total
 188
 189           this.abuses = []
 190
 191           for (const a of resultList.data) {
 192             const abuse = a as ProcessedAbuse
 193
 194             abuse.reasonHtml = await this.toHtml(abuse.reason)
 195
 196             if (abuse.moderationComment) {
 197               abuse.moderationCommentHtml = await this.toHtml(abuse.moderationComment)
 198             }
 199
 200             if (abuse.video) {
 201               abuse.embedHtml = this.sanitizer.bypassSecurityTrustHtml(this.getVideoEmbed(abuse))
 202
 203               if (abuse.video.channel?.ownerAccount) {
 204                 abuse.video.channel.ownerAccount = new Account(abuse.video.channel.ownerAccount)
 205               }
 206             }
 207
 208             if (abuse.comment) {
 209               if (abuse.comment.deleted) {
 210                 abuse.truncatedCommentHtml = abuse.commentHtml = $localize`Deleted comment`
 211               } else {
 212                 const truncated = truncate(abuse.comment.text, { length: 100 })
 213                 abuse.truncatedCommentHtml = await this.markdownRenderer.textMarkdownToHTML(truncated, true)
 214                 abuse.commentHtml = await this.markdownRenderer.textMarkdownToHTML(abuse.comment.text, true)
 215               }
 216             }
 217
 218             if (abuse.reporterAccount) {
 219               abuse.reporterAccount = new Account(abuse.reporterAccount)
 220             }
 221
 222             if (abuse.flaggedAccount) {
 223               abuse.flaggedAccount = new Account(abuse.flaggedAccount)
 224             }
 225
 226             if (abuse.updatedAt === abuse.createdAt) delete abuse.updatedAt
 227
 228             this.abuses.push(abuse)
 229           }
 230         },
 231
 232         err => this.notifier.error(err.message)
 233       )
 234   }
 235
 236   private buildInternalActions (): DropdownAction<ProcessedAbuse>[] {
 237     return [
 238       {
 239         label: $localize`Internal actions`,
 240         isHeader: true
 241       },
 242       {
 243         label: this.isAdminView()
 244           ? $localize`Messages with reporter`
 245           : $localize`Messages with moderators`,
 246         handler: abuse => this.openAbuseMessagesModal(abuse),
 247         isDisplayed: abuse => this.isLocalAbuse(abuse)
 248       },
 249       {
 250         label: $localize`Update internal note`,
 251         handler: abuse => this.openModerationCommentModal(abuse),
 252         isDisplayed: abuse => this.isAdminView() && !!abuse.moderationComment
 253       },
 254       {
 255         label: $localize`Mark as accepted`,
 256         handler: abuse => this.updateAbuseState(abuse, AbuseState.ACCEPTED),
 257         isDisplayed: abuse => this.isAdminView() && !this.isAbuseAccepted(abuse)
 258       },
 259       {
 260         label: $localize`Mark as rejected`,
 261         handler: abuse => this.updateAbuseState(abuse, AbuseState.REJECTED),
 262         isDisplayed: abuse => this.isAdminView() && !this.isAbuseRejected(abuse)
 263       },
 264       {
 265         label: $localize`Add internal note`,
 266         handler: abuse => this.openModerationCommentModal(abuse),
 267         isDisplayed: abuse => this.isAdminView() && !abuse.moderationComment
 268       },
 269       {
 270         label: $localize`Delete report`,
 271         handler: abuse => this.isAdminView() && this.removeAbuse(abuse)
 272       }
 273     ]
 274   }
 275
 276   private buildFlaggedAccountActions (): DropdownAction<ProcessedAbuse>[] {
 277     if (!this.isAdminView()) return []
 278
 279     return [
 280       {
 281         label: $localize`Actions for the flagged account`,
 282         isHeader: true,
 283         isDisplayed: abuse => abuse.flaggedAccount && !abuse.comment && !abuse.video
 284       },
 285
 286       {
 287         label: $localize`Mute account`,
 288         isDisplayed: abuse => abuse.flaggedAccount && !abuse.comment && !abuse.video,
 289         handler: abuse => this.muteAccountHelper(abuse.flaggedAccount)
 290       },
 291
 292       {
 293         label: $localize`Mute server account`,
 294         isDisplayed: abuse => abuse.flaggedAccount && !abuse.comment && !abuse.video,
 295         handler: abuse => this.muteServerHelper(abuse.flaggedAccount.host)
 296       }
 297     ]
 298   }
 299
 300   private buildAccountActions (): DropdownAction<ProcessedAbuse>[] {
 301     if (!this.isAdminView()) return []
 302
 303     return [
 304       {
 305         label: $localize`Actions for the reporter`,
 306         isHeader: true,
 307         isDisplayed: abuse => !!abuse.reporterAccount
 308       },
 309
 310       {
 311         label: $localize`Mute reporter`,
 312         isDisplayed: abuse => !!abuse.reporterAccount,
 313         handler: abuse => this.muteAccountHelper(abuse.reporterAccount)
 314       },
 315
 316       {
 317         label: $localize`Mute server`,
 318         isDisplayed: abuse => abuse.reporterAccount && !abuse.reporterAccount.userId,
 319         handler: abuse => this.muteServerHelper(abuse.reporterAccount.host)
 320       }
 321     ]
 322   }
 323
 324   private buildVideoActions (): DropdownAction<ProcessedAbuse>[] {
 325     if (!this.isAdminView()) return []
 326
 327     return [
 328       {
 329         label: $localize`Actions for the video`,
 330         isHeader: true,
 331         isDisplayed: abuse => abuse.video && !abuse.video.deleted
 332       },
 333       {
 334         label: $localize`Block video`,
 335         isDisplayed: abuse => abuse.video && !abuse.video.deleted && !abuse.video.blacklisted,
 336         handler: abuse => {
 337           this.videoBlocklistService.blockVideo(abuse.video.id, undefined, abuse.video.channel.isLocal)
 338             .subscribe(
 339               () => {
 340                 this.notifier.success($localize`Video blocked.`)
 341
 342                 this.updateAbuseState(abuse, AbuseState.ACCEPTED)
 343               },
 344
 345               err => this.notifier.error(err.message)
 346             )
 347         }
 348       },
 349       {
 350         label: $localize`Unblock video`,
 351         isDisplayed: abuse => abuse.video && !abuse.video.deleted && abuse.video.blacklisted,
 352         handler: abuse => {
 353           this.videoBlocklistService.unblockVideo(abuse.video.id)
 354             .subscribe(
 355               () => {
 356                 this.notifier.success($localize`Video unblocked.`)
 357
 358                 this.updateAbuseState(abuse, AbuseState.ACCEPTED)
 359               },
 360
 361               err => this.notifier.error(err.message)
 362             )
 363         }
 364       },
 365       {
 366         label: $localize`Delete video`,
 367         isDisplayed: abuse => abuse.video && !abuse.video.deleted,
 368         handler: async abuse => {
 369           const res = await this.confirmService.confirm(
 370             $localize`Do you really want to delete this video?`,
 371             $localize`Delete`
 372           )
 373           if (res === false) return
 374
 375           this.videoService.removeVideo(abuse.video.id)
 376             .subscribe(
 377               () => {
 378                 this.notifier.success($localize`Video deleted.`)
 379
 380                 this.updateAbuseState(abuse, AbuseState.ACCEPTED)
 381               },
 382
 383               err => this.notifier.error(err.message)
 384             )
 385         }
 386       }
 387     ]
 388   }
 389
 390   private buildCommentActions (): DropdownAction<ProcessedAbuse>[] {
 391     if (!this.isAdminView()) return []
 392
 393     return [
 394       {
 395         label: $localize`Actions for the comment`,
 396         isHeader: true,
 397         isDisplayed: abuse => abuse.comment && !abuse.comment.deleted
 398       },
 399
 400       {
 401         label: $localize`Delete comment`,
 402         isDisplayed: abuse => abuse.comment && !abuse.comment.deleted,
 403         handler: async abuse => {
 404           const res = await this.confirmService.confirm(
 405             $localize`Do you really want to delete this comment?`,
 406             $localize`Delete`
 407           )
 408           if (res === false) return
 409
 410           this.commentService.deleteVideoComment(abuse.comment.video.id, abuse.comment.id)
 411             .subscribe(
 412               () => {
 413                 this.notifier.success($localize`Comment deleted.`)
 414
 415                 this.updateAbuseState(abuse, AbuseState.ACCEPTED)
 416               },
 417
 418               err => this.notifier.error(err.message)
 419             )
 420         }
 421       }
 422     ]
 423   }
 424
 425   private muteAccountHelper (account: Account) {
 426     this.blocklistService.blockAccountByInstance(account)
 427       .subscribe(
 428         () => {
 429           this.notifier.success($localize`Account ${account.nameWithHost} muted by the instance.`)
 430           account.mutedByInstance = true
 431         },
 432
 433         err => this.notifier.error(err.message)
 434       )
 435   }
 436
 437   private muteServerHelper (host: string) {
 438     this.blocklistService.blockServerByInstance(host)
 439       .subscribe(
 440         () => {
 441           this.notifier.success($localize`Server ${host} muted by the instance.`)
 442         },
 443
 444         err => this.notifier.error(err.message)
 445       )
 446   }
 447
 448   private toHtml (text: string) {
 449     return this.markdownRenderer.textMarkdownToHTML(text)
 450   }
 451 }