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