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

   1 import { Component, OnInit } from '@angular/core'
   2 import { Notifier, ServerService } from '@app/core'
   3 import { ConfirmService } from '../../../core'
   4 import { I18n } from '@ngx-translate/i18n-polyfill'
   5 import { PluginType } from '@shared/models/plugins/plugin.type'
   6 import { PluginApiService } from '@app/+admin/plugins/shared/plugin-api.service'
   7 import { ComponentPagination, hasMoreItems } from '@app/shared/rest/component-pagination.model'
   8 import { ActivatedRoute, Router } from '@angular/router'
   9 import { PeerTubePluginIndex } from '@shared/models/plugins/peertube-plugin-index.model'
  10 import { Subject } from 'rxjs'
  11 import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
  12
  13 @Component({
  14   selector: 'my-plugin-search',
  15   templateUrl: './plugin-search.component.html',
  16   styleUrls: [
  17     '../shared/toggle-plugin-type.scss',
  18     '../shared/plugin-list.component.scss',
  19     './plugin-search.component.scss'
  20   ]
  21 })
  22 export class PluginSearchComponent implements OnInit {
  23   pluginTypeOptions: { label: string, value: PluginType }[] = []
  24   pluginType: PluginType = PluginType.PLUGIN
  25
  26   pagination: ComponentPagination = {
  27     currentPage: 1,
  28     itemsPerPage: 10,
  29     totalItems: null
  30   }
  31   sort = '-popularity'
  32
  33   search = ''
  34   isSearching = false
  35
  36   plugins: PeerTubePluginIndex[] = []
  37   installing: { [name: string]: boolean } = {}
  38   pluginInstalled = false
  39
  40   onDataSubject = new Subject<any[]>()
  41
  42   private searchSubject = new Subject<string>()
  43
  44   constructor (
  45     private server: ServerService,
  46     private i18n: I18n,
  47     private pluginService: PluginApiService,
  48     private notifier: Notifier,
  49     private confirmService: ConfirmService,
  50     private router: Router,
  51     private route: ActivatedRoute
  52   ) {
  53     this.pluginTypeOptions = this.pluginService.getPluginTypeOptions()
  54   }
  55
  56   ngOnInit () {
  57     const query = this.route.snapshot.queryParams
  58     if (query['pluginType']) this.pluginType = parseInt(query['pluginType'], 10)
  59
  60     this.searchSubject.asObservable()
  61         .pipe(
  62           debounceTime(400),
  63           distinctUntilChanged()
  64         )
  65         .subscribe(search => {
  66           this.search = search
  67           this.reloadPlugins()
  68         })
  69
  70     this.reloadPlugins()
  71   }
  72
  73   onSearchChange (search: string) {
  74     this.searchSubject.next(search)
  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 }