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