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