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       .pipe(filter(params => params.search !== undefined && params.search !== null))
 200       .subscribe(params => {
 201         this.search = params.search
 202         this.setTableFilter(params.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     this.router.navigate([ '/admin/moderation/video-abuses/list' ], { queryParams })
 233   }
 234
 235   resetTableFilter () {
 236     this.setTableFilter('')
 237     this.setQueryParams('')
 238     this.resetSearch()
 239   }
 240   /* END Table filter functions */
 241
 242   isVideoAbuseAccepted (videoAbuse: VideoAbuse) {
 243     return videoAbuse.state.id === VideoAbuseState.ACCEPTED
 244   }
 245
 246   isVideoAbuseRejected (videoAbuse: VideoAbuse) {
 247     return videoAbuse.state.id === VideoAbuseState.REJECTED
 248   }
 249
 250   getVideoUrl (videoAbuse: VideoAbuse) {
 251     return Video.buildClientUrl(videoAbuse.video.uuid)
 252   }
 253
 254   getVideoEmbed (videoAbuse: VideoAbuse) {
 255     return buildVideoEmbed(
 256       buildVideoLink({
 257         baseUrl: `${environment.embedUrl}/videos/embed/${videoAbuse.video.uuid}`,
 258         title: false,
 259         warningTitle: false,
 260         startTime: videoAbuse.startAt,
 261         stopTime: videoAbuse.endAt
 262       })
 263     )
 264   }
 265
 266   switchToDefaultAvatar ($event: Event) {
 267     ($event.target as HTMLImageElement).src = Actor.GET_DEFAULT_AVATAR_URL()
 268   }
 269
 270   async removeVideoAbuse (videoAbuse: VideoAbuse) {
 271     const res = await this.confirmService.confirm(this.i18n('Do you really want to delete this abuse report?'), this.i18n('Delete'))
 272     if (res === false) return
 273
 274     this.videoAbuseService.removeVideoAbuse(videoAbuse).subscribe(
 275       () => {
 276         this.notifier.success(this.i18n('Abuse deleted.'))
 277         this.loadData()
 278       },
 279
 280       err => this.notifier.error(err.message)
 281     )
 282   }
 283
 284   updateVideoAbuseState (videoAbuse: VideoAbuse, state: VideoAbuseState) {
 285     this.videoAbuseService.updateVideoAbuse(videoAbuse, { state })
 286       .subscribe(
 287         () => this.loadData(),
 288
 289         err => this.notifier.error(err.message)
 290       )
 291   }
 292
 293   protected loadData () {
 294     return this.videoAbuseService.getVideoAbuses({
 295       pagination: this.pagination,
 296       sort: this.sort,
 297       search: this.search
 298     }).subscribe(
 299         async resultList => {
 300           this.totalRecords = resultList.total
 301           const videoAbuses = []
 302
 303           for (const abuse of resultList.data) {
 304             Object.assign(abuse, {
 305               reasonHtml: await this.toHtml(abuse.reason),
 306               moderationCommentHtml: await this.toHtml(abuse.moderationComment),
 307               embedHtml: this.sanitizer.bypassSecurityTrustHtml(this.getVideoEmbed(abuse)),
 308               reporterAccount: new Account(abuse.reporterAccount)
 309             })
 310
 311             if (abuse.video.channel?.ownerAccount) abuse.video.channel.ownerAccount = new Account(abuse.video.channel.ownerAccount)
 312             if (abuse.updatedAt === abuse.createdAt) delete abuse.updatedAt
 313
 314             videoAbuses.push(abuse as ProcessedVideoAbuse)
 315           }
 316
 317           this.videoAbuses = videoAbuses
 318         },
 319
 320         err => this.notifier.error(err.message)
 321       )
 322   }
 323
 324   private toHtml (text: string) {
 325     return this.markdownRenderer.textMarkdownToHTML(text)
 326   }
 327 }