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

   1 import { SortMeta } from 'primeng/api'
   2 import { filter, 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     private notifier: Notifier,
  29     private serverService: ServerService,
  30     private confirmService: ConfirmService,
  31     private videoBlocklistService: VideoBlockService,
  32     private markdownRenderer: MarkdownService,
  33     private sanitizer: DomSanitizer,
  34     private videoService: VideoService,
  35     private route: ActivatedRoute,
  36     private router: Router
  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
 108     this.route.queryParams
 109       .pipe(filter(params => params.search !== undefined && params.search !== null))
 110       .subscribe(params => {
 111         this.search = params.search
 112         this.setTableFilter(params.search)
 113         this.loadData()
 114       })
 115   }
 116
 117   ngAfterViewInit () {
 118     if (this.search) this.setTableFilter(this.search)
 119   }
 120
 121   /* Table filter functions */
 122   onBlockSearch (event: Event) {
 123     this.onSearch(event)
 124     this.setQueryParams((event.target as HTMLInputElement).value)
 125   }
 126
 127   setQueryParams (search: string) {
 128     const queryParams: Params = {}
 129     if (search) Object.assign(queryParams, { search })
 130     this.router.navigate([ '/admin/moderation/video-blocks/list' ], { queryParams })
 131   }
 132
 133   resetTableFilter () {
 134     this.setTableFilter('')
 135     this.setQueryParams('')
 136     this.resetSearch()
 137   }
 138   /* END Table filter functions */
 139
 140   getIdentifier () {
 141     return 'VideoBlockListComponent'
 142   }
 143
 144   getVideoUrl (videoBlock: VideoBlacklist) {
 145     return Video.buildClientUrl(videoBlock.video.uuid)
 146   }
 147
 148   booleanToText (value: boolean) {
 149     if (value === true) return $localize`yes`
 150
 151     return $localize`no`
 152   }
 153
 154   toHtml (text: string) {
 155     return this.markdownRenderer.textMarkdownToHTML(text)
 156   }
 157
 158   async unblockVideo (entry: VideoBlacklist) {
 159     const confirmMessage = $localize`Do you really want to unblock this video? It will be available again in the videos list.`
 160
 161     const res = await this.confirmService.confirm(confirmMessage, $localize`Unblock`)
 162     if (res === false) return
 163
 164     this.videoBlocklistService.unblockVideo(entry.video.id).subscribe(
 165       () => {
 166         this.notifier.success($localize`Video ${entry.video.name} unblocked.`)
 167         this.loadData()
 168       },
 169
 170       err => this.notifier.error(err.message)
 171     )
 172   }
 173
 174   getVideoEmbed (entry: VideoBlacklist) {
 175     return buildVideoOrPlaylistEmbed(
 176       buildVideoLink({
 177         baseUrl: `${environment.embedUrl}/videos/embed/${entry.video.uuid}`,
 178         title: false,
 179         warningTitle: false
 180       })
 181     )
 182   }
 183
 184   protected loadData () {
 185     this.videoBlocklistService.listBlocks({
 186       pagination: this.pagination,
 187       sort: this.sort,
 188       search: this.search
 189     })
 190       .subscribe(
 191         async resultList => {
 192           this.totalRecords = resultList.total
 193
 194           this.blocklist = resultList.data
 195
 196           for (const element of this.blocklist) {
 197             Object.assign(element, {
 198               reasonHtml: await this.toHtml(element.reason),
 199               embedHtml: this.sanitizer.bypassSecurityTrustHtml(this.getVideoEmbed(element))
 200             })
 201           }
 202         },
 203
 204         err => this.notifier.error(err.message)
 205       )
 206   }
 207 }