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

   1 import { SortMeta } from 'primeng/api'
   2 import { switchMap } from 'rxjs/operators'
   3 import { buildVideoLink, buildVideoOrPlaylistEmbed } from 'src/assets/player/utils'
   4 import { environment } from 'src/environments/environment'
   5 import { AfterViewInit, Component, OnInit } 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, ServerService } from '@app/core'
   9 import { AdvancedInputFilter } from '@app/shared/shared-forms'
  10 import { DropdownAction, Video, VideoService } from '@app/shared/shared-main'
  11 import { VideoBlockService } from '@app/shared/shared-moderation'
  12 import { VideoBlacklist, VideoBlacklistType } from '@shared/models'
  13
  14 @Component({
  15   selector: 'my-video-block-list',
  16   templateUrl: './video-block-list.component.html',
  17   styleUrls: [ '../../../shared/shared-moderation/moderation.scss', './video-block-list.component.scss' ]
  18 })
  19 export class VideoBlockListComponent extends RestTable implements OnInit, AfterViewInit {
  20   blocklist: (VideoBlacklist & { reasonHtml?: string, embedHtml?: string })[] = []
  21   totalRecords = 0
  22   sort: SortMeta = { field: 'createdAt', order: -1 }
  23   pagination: RestPagination = { count: this.rowsPerPage, start: 0 }
  24   blocklistTypeFilter: VideoBlacklistType = undefined
  25
  26   videoBlocklistActions: DropdownAction<VideoBlacklist>[][] = []
  27
  28   inputFilters: AdvancedInputFilter[] = [
  29     {
  30       queryParams: { 'search': 'type:auto' },
  31       label: $localize`Automatic blocks`
  32     },
  33     {
  34       queryParams: { 'search': 'type:manual' },
  35       label: $localize`Manual blocks`
  36     }
  37   ]
  38
  39   constructor (
  40     protected route: ActivatedRoute,
  41     protected router: Router,
  42     private notifier: Notifier,
  43     private serverService: ServerService,
  44     private confirmService: ConfirmService,
  45     private videoBlocklistService: VideoBlockService,
  46     private markdownRenderer: MarkdownService,
  47     private sanitizer: DomSanitizer,
  48     private videoService: VideoService
  49   ) {
  50     super()
  51
  52     this.videoBlocklistActions = [
  53       [
  54         {
  55           label: $localize`Internal actions`,
  56           isHeader: true,
  57           isDisplayed: videoBlock => videoBlock.type === VideoBlacklistType.AUTO_BEFORE_PUBLISHED
  58         },
  59         {
  60           label: $localize`Switch video block to manual`,
  61           handler: videoBlock => {
  62             this.videoBlocklistService.unblockVideo(videoBlock.video.id).pipe(
  63               switchMap(_ => this.videoBlocklistService.blockVideo(videoBlock.video.id, undefined, true))
  64             ).subscribe(
  65               () => {
  66                 this.notifier.success($localize`Video ${videoBlock.video.name} switched to manual block.`)
  67                 this.loadData()
  68               },
  69
  70               err => this.notifier.error(err.message)
  71             )
  72           },
  73           isDisplayed: videoBlock => videoBlock.type === VideoBlacklistType.AUTO_BEFORE_PUBLISHED
  74         }
  75       ],
  76       [
  77         {
  78           label: $localize`Actions for the video`,
  79           isHeader: true
  80         },
  81         {
  82           label: $localize`Unblock`,
  83           handler: videoBlock => this.unblockVideo(videoBlock)
  84         },
  85
  86         {
  87           label: $localize`Delete`,
  88           handler: async videoBlock => {
  89             const res = await this.confirmService.confirm(
  90               $localize`Do you really want to delete this video?`,
  91               $localize`Delete`
  92             )
  93             if (res === false) return
  94
  95             this.videoService.removeVideo(videoBlock.video.id)
  96               .subscribe(
  97                 () => {
  98                   this.notifier.success($localize`Video deleted.`)
  99                 },
 100
 101                 err => this.notifier.error(err.message)
 102               )
 103           }
 104         }
 105       ]
 106     ]
 107   }
 108
 109   ngOnInit () {
 110     this.serverService.getConfig()
 111         .subscribe(config => {
 112           // don't filter if auto-blacklist is not enabled as this will be the only list
 113           if (config.autoBlacklist.videos.ofUsers.enabled) {
 114             this.blocklistTypeFilter = VideoBlacklistType.MANUAL
 115           }
 116         })
 117
 118     this.initialize()
 119     this.listenToSearchChange()
 120   }
 121
 122   ngAfterViewInit () {
 123     if (this.search) this.setTableFilter(this.search, false)
 124   }
 125
 126   getIdentifier () {
 127     return 'VideoBlockListComponent'
 128   }
 129
 130   getVideoUrl (videoBlock: VideoBlacklist) {
 131     return Video.buildClientUrl(videoBlock.video.uuid)
 132   }
 133
 134   toHtml (text: string) {
 135     return this.markdownRenderer.textMarkdownToHTML(text)
 136   }
 137
 138   async unblockVideo (entry: VideoBlacklist) {
 139     const confirmMessage = $localize`Do you really want to unblock this video? It will be available again in the videos list.`
 140
 141     const res = await this.confirmService.confirm(confirmMessage, $localize`Unblock`)
 142     if (res === false) return
 143
 144     this.videoBlocklistService.unblockVideo(entry.video.id).subscribe(
 145       () => {
 146         this.notifier.success($localize`Video ${entry.video.name} unblocked.`)
 147         this.loadData()
 148       },
 149
 150       err => this.notifier.error(err.message)
 151     )
 152   }
 153
 154   getVideoEmbed (entry: VideoBlacklist) {
 155     return buildVideoOrPlaylistEmbed(
 156       buildVideoLink({
 157         baseUrl: `${environment.originServerUrl}/videos/embed/${entry.video.uuid}`,
 158         title: false,
 159         warningTitle: false
 160       }),
 161       entry.video.name
 162     )
 163   }
 164
 165   protected loadData () {
 166     this.videoBlocklistService.listBlocks({
 167       pagination: this.pagination,
 168       sort: this.sort,
 169       search: this.search
 170     })
 171       .subscribe(
 172         async resultList => {
 173           this.totalRecords = resultList.total
 174
 175           this.blocklist = resultList.data
 176
 177           for (const element of this.blocklist) {
 178             Object.assign(element, {
 179               reasonHtml: await this.toHtml(element.reason),
 180               embedHtml: this.sanitizer.bypassSecurityTrustHtml(this.getVideoEmbed(element))
 181             })
 182           }
 183         },
 184
 185         err => this.notifier.error(err.message)
 186       )
 187   }
 188 }