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

   1 import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core'
   2 import { Account } from '@app/shared/account/account.model'
   3 import { Notifier } from '@app/core'
   4 import { SortMeta } from 'primeng/api'
   5 import { VideoAbuse, VideoAbuseState } from '../../../../../../shared'
   6 import { RestPagination, RestTable, VideoAbuseService, VideoBlacklistService } from '../../../shared'
   7 import { I18n } from '@ngx-translate/i18n-polyfill'
   8 import { DropdownAction } from '../../../shared/buttons/action-dropdown.component'
   9 import { ConfirmService } from '../../../core/index'
  10 import { ModerationCommentModalComponent } from './moderation-comment-modal.component'
  11 import { Video } from '../../../shared/video/video.model'
  12 import { MarkdownService } from '@app/shared/renderer'
  13 import { Actor } from '@app/shared/actor/actor.model'
  14 import { buildVideoLink, buildVideoEmbed } from 'src/assets/player/utils'
  15 import { getAbsoluteAPIUrl } from '@app/shared/misc/utils'
  16 import { DomSanitizer } from '@angular/platform-browser'
  17 import { BlocklistService } from '@app/shared/blocklist'
  18 import { VideoService } from '@app/shared/video/video.service'
  19 import { ActivatedRoute } from '@angular/router'
  20 import { filter } from 'rxjs/operators'
  21
  22 @Component({
  23   selector: 'my-video-abuse-list',
  24   templateUrl: './video-abuse-list.component.html',
  25   styleUrls: [ '../moderation.component.scss', './video-abuse-list.component.scss' ]
  26 })
  27 export class VideoAbuseListComponent extends RestTable implements OnInit, AfterViewInit {
  28   @ViewChild('moderationCommentModal', { static: true }) moderationCommentModal: ModerationCommentModalComponent
  29
  30   videoAbuses: (VideoAbuse & { moderationCommentHtml?: string, reasonHtml?: string })[] = []
  31   totalRecords = 0
  32   sort: SortMeta = { field: 'createdAt', order: 1 }
  33   pagination: RestPagination = { count: this.rowsPerPage, start: 0 }
  34
  35   videoAbuseActions: DropdownAction<VideoAbuse>[][] = []
  36
  37   constructor (
  38     private notifier: Notifier,
  39     private videoAbuseService: VideoAbuseService,
  40     private blocklistService: BlocklistService,
  41     private videoService: VideoService,
  42     private videoBlacklistService: VideoBlacklistService,
  43     private confirmService: ConfirmService,
  44     private i18n: I18n,
  45     private markdownRenderer: MarkdownService,
  46     private sanitizer: DomSanitizer,
  47     private route: ActivatedRoute
  48   ) {
  49     super()
  50
  51     this.videoAbuseActions = [
  52       [
  53         {
  54           label: this.i18n('Internal actions'),
  55           isHeader: true
  56         },
  57         {
  58           label: this.i18n('Delete report'),
  59           handler: videoAbuse => this.removeVideoAbuse(videoAbuse)
  60         },
  61         {
  62           label: this.i18n('Add note'),
  63           handler: videoAbuse => this.openModerationCommentModal(videoAbuse),
  64           isDisplayed: videoAbuse => !videoAbuse.moderationComment
  65         },
  66         {
  67           label: this.i18n('Update note'),
  68           handler: videoAbuse => this.openModerationCommentModal(videoAbuse),
  69           isDisplayed: videoAbuse => !!videoAbuse.moderationComment
  70         },
  71         {
  72           label: this.i18n('Mark as accepted'),
  73           handler: videoAbuse => this.updateVideoAbuseState(videoAbuse, VideoAbuseState.ACCEPTED),
  74           isDisplayed: videoAbuse => !this.isVideoAbuseAccepted(videoAbuse)
  75         },
  76         {
  77           label: this.i18n('Mark as rejected'),
  78           handler: videoAbuse => this.updateVideoAbuseState(videoAbuse, VideoAbuseState.REJECTED),
  79           isDisplayed: videoAbuse => !this.isVideoAbuseRejected(videoAbuse)
  80         }
  81       ],
  82       [
  83         {
  84           label: this.i18n('Actions for the video'),
  85           isHeader: true,
  86           isDisplayed: videoAbuse => !videoAbuse.video.deleted
  87         },
  88         {
  89           label: this.i18n('Blacklist video'),
  90           isDisplayed: videoAbuse => !videoAbuse.video.deleted && !videoAbuse.video.blacklisted,
  91           handler: videoAbuse => {
  92             this.videoBlacklistService.blacklistVideo(videoAbuse.video.id, undefined, true)
  93               .subscribe(
  94                 () => {
  95                   this.notifier.success(this.i18n('Video blacklisted.'))
  96
  97                   this.updateVideoAbuseState(videoAbuse, VideoAbuseState.ACCEPTED)
  98                 },
  99
 100                 err => this.notifier.error(err.message)
 101               )
 102           }
 103         },
 104         {
 105           label: this.i18n('Unblacklist video'),
 106           isDisplayed: videoAbuse => !videoAbuse.video.deleted && videoAbuse.video.blacklisted,
 107           handler: videoAbuse => {
 108             this.videoBlacklistService.removeVideoFromBlacklist(videoAbuse.video.id)
 109               .subscribe(
 110                 () => {
 111                   this.notifier.success(this.i18n('Video unblacklisted.'))
 112
 113                   this.updateVideoAbuseState(videoAbuse, VideoAbuseState.ACCEPTED)
 114                 },
 115
 116                 err => this.notifier.error(err.message)
 117               )
 118           }
 119         },
 120         {
 121           label: this.i18n('Delete video'),
 122           isDisplayed: videoAbuse => !videoAbuse.video.deleted,
 123           handler: async videoAbuse => {
 124             const res = await this.confirmService.confirm(
 125               this.i18n('Do you really want to delete this video?'),
 126               this.i18n('Delete')
 127             )
 128             if (res === false) return
 129
 130             this.videoService.removeVideo(videoAbuse.video.id)
 131               .subscribe(
 132                 () => {
 133                   this.notifier.success(this.i18n('Video deleted.'))
 134
 135                   this.updateVideoAbuseState(videoAbuse, VideoAbuseState.ACCEPTED)
 136                 },
 137
 138                 err => this.notifier.error(err.message)
 139               )
 140           }
 141         }
 142       ],
 143       [
 144         {
 145           label: this.i18n('Actions for the reporter'),
 146           isHeader: true
 147         },
 148         {
 149           label: this.i18n('Mute reporter'),
 150           handler: async videoAbuse => {
 151             const account = videoAbuse.reporterAccount as Account
 152
 153             this.blocklistService.blockAccountByInstance(account)
 154               .subscribe(
 155                 () => {
 156                   this.notifier.success(
 157                     this.i18n('Account {{nameWithHost}} muted by the instance.', { nameWithHost: account.nameWithHost })
 158                   )
 159
 160                   account.mutedByInstance = true
 161                 },
 162
 163                 err => this.notifier.error(err.message)
 164               )
 165           }
 166         },
 167         {
 168           label: this.i18n('Mute server'),
 169           isDisplayed: videoAbuse => !videoAbuse.reporterAccount.userId,
 170           handler: async videoAbuse => {
 171             this.blocklistService.blockServerByInstance(videoAbuse.reporterAccount.host)
 172               .subscribe(
 173                 () => {
 174                   this.notifier.success(
 175                     this.i18n('Server {{host}} muted by the instance.', { host: videoAbuse.reporterAccount.host })
 176                   )
 177                 },
 178
 179                 err => this.notifier.error(err.message)
 180               )
 181           }
 182         }
 183       ]
 184     ]
 185   }
 186
 187   ngOnInit () {
 188     this.initialize()
 189
 190     this.route.queryParams
 191       .pipe(filter(params => params.search !== undefined && params.search !== null))
 192       .subscribe(params => {
 193         this.search = params.search
 194         this.setTableFilter(params.search)
 195         this.loadData()
 196       })
 197   }
 198
 199   ngAfterViewInit () {
 200     if (this.search) this.setTableFilter(this.search)
 201   }
 202
 203   getIdentifier () {
 204     return 'VideoAbuseListComponent'
 205   }
 206
 207   openModerationCommentModal (videoAbuse: VideoAbuse) {
 208     this.moderationCommentModal.openModal(videoAbuse)
 209   }
 210
 211   onModerationCommentUpdated () {
 212     this.loadData()
 213   }
 214
 215   createByString (account: Account) {
 216     return Account.CREATE_BY_STRING(account.name, account.host)
 217   }
 218
 219   setTableFilter (filter: string) {
 220     const filterInput = document.getElementById('table-filter') as HTMLInputElement
 221     if (filterInput) filterInput.value = filter
 222   }
 223
 224   isVideoAbuseAccepted (videoAbuse: VideoAbuse) {
 225     return videoAbuse.state.id === VideoAbuseState.ACCEPTED
 226   }
 227
 228   isVideoAbuseRejected (videoAbuse: VideoAbuse) {
 229     return videoAbuse.state.id === VideoAbuseState.REJECTED
 230   }
 231
 232   getVideoUrl (videoAbuse: VideoAbuse) {
 233     return Video.buildClientUrl(videoAbuse.video.uuid)
 234   }
 235
 236   getVideoEmbed (videoAbuse: VideoAbuse) {
 237     const absoluteAPIUrl = getAbsoluteAPIUrl()
 238     const embedUrl = buildVideoLink({
 239       baseUrl: absoluteAPIUrl + '/videos/embed/' + videoAbuse.video.uuid,
 240       warningTitle: false
 241     })
 242     return buildVideoEmbed(embedUrl)
 243   }
 244
 245   switchToDefaultAvatar ($event: Event) {
 246     ($event.target as HTMLImageElement).src = Actor.GET_DEFAULT_AVATAR_URL()
 247   }
 248
 249   async removeVideoAbuse (videoAbuse: VideoAbuse) {
 250     const res = await this.confirmService.confirm(this.i18n('Do you really want to delete this abuse report?'), this.i18n('Delete'))
 251     if (res === false) return
 252
 253     this.videoAbuseService.removeVideoAbuse(videoAbuse).subscribe(
 254       () => {
 255         this.notifier.success(this.i18n('Abuse deleted.'))
 256         this.loadData()
 257       },
 258
 259       err => this.notifier.error(err.message)
 260     )
 261   }
 262
 263   updateVideoAbuseState (videoAbuse: VideoAbuse, state: VideoAbuseState) {
 264     this.videoAbuseService.updateVideoAbuse(videoAbuse, { state })
 265       .subscribe(
 266         () => this.loadData(),
 267
 268         err => this.notifier.error(err.message)
 269       )
 270
 271   }
 272
 273   protected loadData () {
 274     return this.videoAbuseService.getVideoAbuses({
 275       pagination: this.pagination,
 276       sort: this.sort,
 277       search: this.search
 278     }).subscribe(
 279         async resultList => {
 280           this.totalRecords = resultList.total
 281
 282           this.videoAbuses = resultList.data
 283
 284           for (const abuse of this.videoAbuses) {
 285             Object.assign(abuse, {
 286               reasonHtml: await this.toHtml(abuse.reason),
 287               moderationCommentHtml: await this.toHtml(abuse.moderationComment),
 288               embedHtml: this.sanitizer.bypassSecurityTrustHtml(this.getVideoEmbed(abuse)),
 289               reporterAccount: new Account(abuse.reporterAccount)
 290             })
 291           }
 292
 293         },
 294
 295         err => this.notifier.error(err.message)
 296       )
 297   }
 298
 299   private toHtml (text: string) {
 300     return this.markdownRenderer.textMarkdownToHTML(text)
 301   }
 302 }