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 { PeerTubePluginIndex, PluginType } from '@shared/models'
   8
   9 @Component({
  10   selector: 'my-plugin-search',
  11   templateUrl: './plugin-search.component.html',
  12   styleUrls: [
  13     '../shared/toggle-plugin-type.scss',
  14     '../shared/plugin-list.component.scss',
  15     './plugin-search.component.scss'
  16   ]
  17 })
  18 export class PluginSearchComponent implements OnInit {
  19   pluginTypeOptions: { label: string, value: PluginType }[] = []
  20   pluginType: PluginType = PluginType.PLUGIN
  21
  22   pagination: ComponentPagination = {
  23     currentPage: 1,
  24     itemsPerPage: 10,
  25     totalItems: null
  26   }
  27   sort = '-popularity'
  28
  29   search = ''
  30   isSearching = false
  31
  32   plugins: PeerTubePluginIndex[] = []
  33   installing: { [name: string]: boolean } = {}
  34   pluginInstalled = false
  35
  36   onDataSubject = new Subject<any[]>()
  37
  38   private searchSubject = new Subject<string>()
  39
  40   constructor (
  41     private pluginService: PluginService,
  42     private pluginApiService: PluginApiService,
  43     private notifier: Notifier,
  44     private confirmService: ConfirmService,
  45     private router: Router,
  46     private route: ActivatedRoute
  47   ) {
  48     this.pluginTypeOptions = this.pluginApiService.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.pluginApiService.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   getPluginOrThemeHref (name: string) {
 119     return this.pluginApiService.getPluginOrThemeHref(this.pluginType, name)
 120   }
 121
 122   getShowRouterLink (plugin: PeerTubePluginIndex) {
 123     return [ '/admin', 'plugins', 'show', this.pluginService.nameToNpmName(plugin.name, this.pluginType) ]
 124   }
 125
 126   isThemeSearch () {
 127     return this.pluginType === PluginType.THEME
 128   }
 129
 130   async install (plugin: PeerTubePluginIndex) {
 131     if (this.installing[plugin.npmName]) return
 132
 133     const res = await this.confirmService.confirm(
 134       $localize`Please only install plugins or themes you trust, since they can execute any code on your instance.`,
 135       $localize`Install ${plugin.name}?`
 136     )
 137     if (res === false) return
 138
 139     this.installing[plugin.npmName] = true
 140
 141     this.pluginApiService.install(plugin.npmName)
 142         .subscribe(
 143           () => {
 144             this.installing[plugin.npmName] = false
 145             this.pluginInstalled = true
 146
 147             this.notifier.success($localize`${plugin.name} installed.`)
 148
 149             plugin.installed = true
 150           },
 151
 152           err => this.notifier.error(err.message)
 153         )
 154   }
 155 }