client/src/app/+admin/plugins/plugin-search/plugin-search.component.ts

   1 import { Subject } from 'rxjs'
   2 import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
   3 import { Component, OnInit } from '@angular/core'
   4 import { ActivatedRoute, Router } from '@angular/router'
   5 import { PluginApiService } from '@app/+admin/plugins/shared/plugin-api.service'
   6 import { ComponentPagination, ConfirmService, hasMoreItems, Notifier, PluginService } from '@app/core'
   7 import { logger } from '@root-helpers/logger'
   8 import { PeerTubePluginIndex, PluginType } from '@shared/models'
   9
  10 @Component({
  11   selector: 'my-plugin-search',
  12   templateUrl: './plugin-search.component.html',
  13   styleUrls: [ './plugin-search.component.scss' ]
  14 })
  15 export class PluginSearchComponent implements OnInit {
  16   pluginType: PluginType
  17
  18   pagination: ComponentPagination = {
  19     currentPage: 1,
  20     itemsPerPage: 10,
  21     totalItems: null
  22   }
  23   sort = '-popularity'
  24
  25   search = ''
  26   isSearching = false
  27
  28   plugins: PeerTubePluginIndex[] = []
  29   installing: { [name: string]: boolean } = {}
  30   pluginInstalled = false
  31
  32   onDataSubject = new Subject<any[]>()
  33
  34   private searchSubject = new Subject<string>()
  35
  36   constructor (
  37     private pluginService: PluginService,
  38     private pluginApiService: PluginApiService,
  39     private notifier: Notifier,
  40     private confirmService: ConfirmService,
  41     private router: Router,
  42     private route: ActivatedRoute
  43   ) {
  44   }
  45
  46   ngOnInit () {
  47     if (!this.route.snapshot.queryParams['pluginType']) {
  48       const queryParams = { pluginType: PluginType.PLUGIN }
  49
  50       this.router.navigate([], { queryParams })
  51     }
  52
  53     this.route.queryParams.subscribe(query => {
  54       if (!query['pluginType']) return
  55
  56       this.pluginType = parseInt(query['pluginType'], 10)
  57       this.search = query['search'] || ''
  58
  59       this.reloadPlugins()
  60     })
  61
  62     this.searchSubject.asObservable()
  63         .pipe(
  64           debounceTime(400),
  65           distinctUntilChanged()
  66         )
  67         .subscribe(search => this.router.navigate([], { queryParams: { search }, queryParamsHandling: 'merge' }))
  68   }
  69
  70   onSearchChange (event: Event) {
  71     const target = event.target as HTMLInputElement
  72
  73     this.searchSubject.next(target.value)
  74   }
  75
  76   reloadPlugins () {
  77     this.pagination.currentPage = 1
  78     this.plugins = []
  79
  80     this.loadMorePlugins()
  81   }
  82
  83   loadMorePlugins () {
  84     this.isSearching = true
  85
  86     this.pluginApiService.searchAvailablePlugins(this.pluginType, this.pagination, this.sort, this.search)
  87         .subscribe({
  88           next: res => {
  89             this.isSearching = false
  90
  91             this.plugins = this.plugins.concat(res.data)
  92             this.pagination.totalItems = res.total
  93
  94             this.onDataSubject.next(res.data)
  95           },
  96
  97           error: err => {
  98             logger.error(err)
  99
 100             const message = $localize`The plugin index is not available. Please retry later.`
 101             this.notifier.error(message)
 102           }
 103         })
 104   }
 105
 106   onNearOfBottom () {
 107     if (!hasMoreItems(this.pagination)) return
 108
 109     this.pagination.currentPage += 1
 110
 111     this.loadMorePlugins()
 112   }
 113
 114   isInstalling (plugin: PeerTubePluginIndex) {
 115     return !!this.installing[plugin.npmName]
 116   }
 117
 118   getShowRouterLink (plugin: PeerTubePluginIndex) {
 119     return [ '/admin', 'plugins', 'show', this.pluginService.nameToNpmName(plugin.name, this.pluginType) ]
 120   }
 121
 122   isThemeSearch () {
 123     return this.pluginType === PluginType.THEME
 124   }
 125
 126   async install (plugin: PeerTubePluginIndex) {
 127     if (this.installing[plugin.npmName]) return
 128
 129     const res = await this.confirmService.confirm(
 130       $localize`Please only install plugins or themes you trust, since they can execute any code on your instance.`,
 131       $localize`Install ${plugin.name}?`
 132     )
 133     if (res === false) return
 134
 135     this.installing[plugin.npmName] = true
 136
 137     this.pluginApiService.install(plugin.npmName)
 138         .subscribe({
 139           next: () => {
 140             this.installing[plugin.npmName] = false
 141             this.pluginInstalled = true
 142
 143             this.notifier.success($localize`${plugin.name} installed.`)
 144
 145             plugin.installed = true
 146           },
 147
 148           error: err => {
 149             this.installing[plugin.npmName] = false
 150
 151             this.notifier.error(err.message)
 152           }
 153         })
 154   }
 155 }