client/src/app/search/search.component.ts

   1 import { forkJoin, of, Subscription } from 'rxjs'
   2 import { Component, OnDestroy, OnInit } from '@angular/core'
   3 import { ActivatedRoute, Router } from '@angular/router'
   4 import { AuthService, Notifier, ServerService } from '@app/core'
   5 import { HooksService } from '@app/core/plugins/hooks.service'
   6 import { AdvancedSearch } from '@app/search/advanced-search.model'
   7 import { SearchService } from '@app/search/search.service'
   8 import { immutableAssign } from '@app/shared/misc/utils'
   9 import { ComponentPagination } from '@app/shared/rest/component-pagination.model'
  10 import { VideoChannel } from '@app/shared/video-channel/video-channel.model'
  11 import { Video } from '@app/shared/video/video.model'
  12 import { MetaService } from '@ngx-meta/core'
  13 import { I18n } from '@ngx-translate/i18n-polyfill'
  14 import { ServerConfig } from '@shared/models'
  15 import { UserService } from '@app/shared'
  16 import { SearchTargetType } from '@shared/models/search/search-target-query.model'
  17
  18 @Component({
  19   selector: 'my-search',
  20   styleUrls: [ './search.component.scss' ],
  21   templateUrl: './search.component.html'
  22 })
  23 export class SearchComponent implements OnInit, OnDestroy {
  24   results: (Video | VideoChannel)[] = []
  25
  26   pagination: ComponentPagination = {
  27     currentPage: 1,
  28     itemsPerPage: 10, // Only for videos, use another variable for channels
  29     totalItems: null
  30   }
  31   advancedSearch: AdvancedSearch = new AdvancedSearch()
  32   isSearchFilterCollapsed = true
  33   currentSearch: string
  34
  35   errorMessage: string
  36   serverConfig: ServerConfig
  37
  38   private subActivatedRoute: Subscription
  39   private isInitialLoad = false // set to false to show the search filters on first arrival
  40   private firstSearch = true
  41
  42   private channelsPerPage = 2
  43
  44   private lastSearchTarget: SearchTargetType
  45
  46   constructor (
  47     private i18n: I18n,
  48     private route: ActivatedRoute,
  49     private router: Router,
  50     private metaService: MetaService,
  51     private notifier: Notifier,
  52     private searchService: SearchService,
  53     private authService: AuthService,
  54     private hooks: HooksService,
  55     private serverService: ServerService
  56   ) { }
  57
  58   get user () {
  59     return this.authService.getUser()
  60   }
  61
  62   ngOnInit () {
  63     this.serverService.getConfig()
  64       .subscribe(config => this.serverConfig = config)
  65
  66     this.subActivatedRoute = this.route.queryParams.subscribe(
  67       async queryParams => {
  68         const querySearch = queryParams['search']
  69         const searchTarget = queryParams['searchTarget']
  70
  71         // Search updated, reset filters
  72         if (this.currentSearch !== querySearch || searchTarget !== this.advancedSearch.searchTarget) {
  73           this.resetPagination()
  74           this.advancedSearch.reset()
  75
  76           this.currentSearch = querySearch || undefined
  77           this.updateTitle()
  78         }
  79
  80         this.advancedSearch = new AdvancedSearch(queryParams)
  81         if (!this.advancedSearch.searchTarget) {
  82           this.advancedSearch.searchTarget = await this.serverService.getDefaultSearchTarget()
  83         }
  84
  85         // Don't hide filters if we have some of them AND the user just came on the webpage
  86         this.isSearchFilterCollapsed = this.isInitialLoad === false || !this.advancedSearch.containsValues()
  87         this.isInitialLoad = false
  88
  89         this.search()
  90       },
  91
  92       err => this.notifier.error(err.text)
  93     )
  94
  95     this.hooks.runAction('action:search.init', 'search')
  96   }
  97
  98   ngOnDestroy () {
  99     if (this.subActivatedRoute) this.subActivatedRoute.unsubscribe()
 100   }
 101
 102   isVideoChannel (d: VideoChannel | Video): d is VideoChannel {
 103     return d instanceof VideoChannel
 104   }
 105
 106   isVideo (v: VideoChannel | Video): v is Video {
 107     return v instanceof Video
 108   }
 109
 110   isUserLoggedIn () {
 111     return this.authService.isLoggedIn()
 112   }
 113
 114   search () {
 115     forkJoin([
 116       this.getVideosObs(),
 117       this.getVideoChannelObs()
 118     ]).subscribe(
 119       ([videosResult, videoChannelsResult]) => {
 120         this.results = this.results
 121           .concat(videoChannelsResult.data)
 122           .concat(videosResult.data)
 123
 124         this.pagination.totalItems = videosResult.total + videoChannelsResult.total
 125         this.lastSearchTarget = this.advancedSearch.searchTarget
 126
 127         // Focus on channels if there are no enough videos
 128         if (this.firstSearch === true && videosResult.data.length < this.pagination.itemsPerPage) {
 129           this.resetPagination()
 130           this.firstSearch = false
 131
 132           this.channelsPerPage = 10
 133           this.search()
 134         }
 135
 136         this.firstSearch = false
 137       },
 138
 139       err => {
 140         if (this.advancedSearch.searchTarget !== 'search-index') this.notifier.error(err.message)
 141
 142         this.notifier.error(
 143           this.i18n('Search index is unavailable. Retrying with instance results instead.'),
 144           this.i18n('Search error')
 145         )
 146         this.advancedSearch.searchTarget = 'local'
 147         this.search()
 148       }
 149     )
 150   }
 151
 152   onNearOfBottom () {
 153     // Last page
 154     if (this.pagination.totalItems <= (this.pagination.currentPage * this.pagination.itemsPerPage)) return
 155
 156     this.pagination.currentPage += 1
 157     this.search()
 158   }
 159
 160   onFiltered () {
 161     this.resetPagination()
 162
 163     this.updateUrlFromAdvancedSearch()
 164   }
 165
 166   numberOfFilters () {
 167     return this.advancedSearch.size()
 168   }
 169
 170   // Add VideoChannel for typings, but the template already checks "video" argument is a video
 171   removeVideoFromArray (video: Video | VideoChannel) {
 172     this.results = this.results.filter(r => !this.isVideo(r) || r.id !== video.id)
 173   }
 174
 175   getChannelUrl (channel: VideoChannel) {
 176     if (this.advancedSearch.searchTarget === 'search-index' && channel.url) {
 177       const remoteUriConfig = this.serverConfig.search.remoteUri
 178
 179       // Redirect on the external instance if not allowed to fetch remote data
 180       const externalRedirect = (!this.authService.isLoggedIn() && !remoteUriConfig.anonymous) || !remoteUriConfig.users
 181       const fromPath = window.location.pathname + window.location.search
 182
 183       return [ '/search/lazy-load-channel', { url: channel.url, externalRedirect, fromPath } ]
 184     }
 185
 186     return [ '/video-channels', channel.nameWithHost ]
 187   }
 188
 189   hideActions () {
 190     return this.lastSearchTarget === 'search-index'
 191   }
 192
 193   private resetPagination () {
 194     this.pagination.currentPage = 1
 195     this.pagination.totalItems = null
 196     this.channelsPerPage = 2
 197
 198     this.results = []
 199   }
 200
 201   private updateTitle () {
 202     const suffix = this.currentSearch ? ' ' + this.currentSearch : ''
 203     this.metaService.setTitle(this.i18n('Search') + suffix)
 204   }
 205
 206   private updateUrlFromAdvancedSearch () {
 207     const search = this.currentSearch || undefined
 208
 209     this.router.navigate([], {
 210       relativeTo: this.route,
 211       queryParams: Object.assign({}, this.advancedSearch.toUrlObject(), { search })
 212     })
 213   }
 214
 215   private getVideosObs () {
 216     const params = {
 217       search: this.currentSearch,
 218       componentPagination: this.pagination,
 219       advancedSearch: this.advancedSearch
 220     }
 221
 222     return this.hooks.wrapObsFun(
 223       this.searchService.searchVideos.bind(this.searchService),
 224       params,
 225       'search',
 226       'filter:api.search.videos.list.params',
 227       'filter:api.search.videos.list.result'
 228     )
 229   }
 230
 231   private getVideoChannelObs () {
 232     if (!this.currentSearch) return of({ data: [], total: 0 })
 233
 234     const params = {
 235       search: this.currentSearch,
 236       componentPagination: immutableAssign(this.pagination, { itemsPerPage: this.channelsPerPage }),
 237       searchTarget: this.advancedSearch.searchTarget
 238     }
 239
 240     return this.hooks.wrapObsFun(
 241       this.searchService.searchVideoChannels.bind(this.searchService),
 242       params,
 243       'search',
 244       'filter:api.search.video-channels.list.params',
 245       'filter:api.search.video-channels.list.result'
 246     )
 247   }
 248 }