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