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

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