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 } from '@app/core'
   7 import { PeerTubePluginIndex } from '@shared/models/plugins/peertube-plugin-index.model'
   8 import { PluginType } from '@shared/models/plugins/plugin.type'
   9
  10 @Component({
  11   selector: 'my-plugin-search',
  12   templateUrl: './plugin-search.component.html',
  13   styleUrls: [
  14     '../shared/toggle-plugin-type.scss',
  15     '../shared/plugin-list.component.scss',
  16     './plugin-search.component.scss'
  17   ]
  18 })
  19 export class PluginSearchComponent implements OnInit {
  20   pluginTypeOptions: { label: string, value: PluginType }[] = []
  21   pluginType: PluginType = PluginType.PLUGIN
  22
  23   pagination: ComponentPagination = {
  24     currentPage: 1,
  25     itemsPerPage: 10,
  26     totalItems: null
  27   }
  28   sort = '-popularity'
  29
  30   search = ''
  31   isSearching = false
  32
  33   plugins: PeerTubePluginIndex[] = []
  34   installing: { [name: string]: boolean } = {}
  35   pluginInstalled = false
  36
  37   onDataSubject = new Subject<any[]>()
  38
  39   private searchSubject = new Subject<string>()
  40
  41   constructor (
  42     private pluginService: PluginApiService,
  43     private notifier: Notifier,
  44     private confirmService: ConfirmService,
  45     private router: Router,
  46     private route: ActivatedRoute
  47   ) {
  48     this.pluginTypeOptions = this.pluginService.getPluginTypeOptions()
  49   }
  50
  51   ngOnInit () {
  52     const query = this.route.snapshot.queryParams
  53     if (query['pluginType']) this.pluginType = parseInt(query['pluginType'], 10)
  54
  55     this.searchSubject.asObservable()
  56         .pipe(
  57           debounceTime(400),
  58           distinctUntilChanged()
  59         )
  60         .subscribe(search => {
  61           this.search = search
  62           this.reloadPlugins()
  63         })
  64
  65     this.reloadPlugins()
  66   }
  67
  68   onSearchChange (event: Event) {
  69     const target = event.target as HTMLInputElement
  70
  71     this.searchSubject.next(target.value)
  72   }
  73
  74   reloadPlugins () {
  75     this.pagination.currentPage = 1
  76     this.plugins = []
  77
  78     this.router.navigate([], { queryParams: { pluginType: this.pluginType } })
  79
  80     this.loadMorePlugins()
  81   }
  82
  83   loadMorePlugins () {
  84     this.isSearching = true
  85
  86     this.pluginService.searchAvailablePlugins(this.pluginType, this.pagination, this.sort, this.search)
  87         .subscribe(
  88           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           err => {
  98             console.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   async install (plugin: PeerTubePluginIndex) {
 119     if (this.installing[plugin.npmName]) return
 120
 121     const res = await this.confirmService.confirm(
 122       $localize`Please only install plugins or themes you trust, since they can execute any code on your instance.`,
 123       $localize`Install ${plugin.name}?`
 124     )
 125     if (res === false) return
 126
 127     this.installing[plugin.npmName] = true
 128
 129     this.pluginService.install(plugin.npmName)
 130         .subscribe(
 131           () => {
 132             this.installing[plugin.npmName] = false
 133             this.pluginInstalled = true
 134
 135             this.notifier.success($localize`${plugin.name} installed.`)
 136
 137             plugin.installed = true
 138           },
 139
 140           err => this.notifier.error(err.message)
 141         )
 142   }
 143 }