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

   1 import { forkJoin, of, Subscription } from 'rxjs'
   2 import { LinkType } from 'src/types/link.type'
   3 import { Component, OnDestroy, OnInit } from '@angular/core'
   4 import { ActivatedRoute, Router } from '@angular/router'
   5 import { AuthService, HooksService, MetaService, Notifier, ServerService, User, UserService } from '@app/core'
   6 import { immutableAssign } from '@app/helpers'
   7 import { validateHost } from '@app/shared/form-validators/host-validators'
   8 import { Video, VideoChannel } from '@app/shared/shared-main'
   9 import { AdvancedSearch, SearchService } from '@app/shared/shared-search'
  10 import { MiniatureDisplayOptions } from '@app/shared/shared-video-miniature'
  11 import { VideoPlaylist } from '@app/shared/shared-video-playlist'
  12 import { HTMLServerConfig, SearchTargetType } from '@shared/models'
  13
  14 @Component({
  15   selector: 'my-search',
  16   styleUrls: [ './search.component.scss' ],
  17   templateUrl: './search.component.html'
  18 })
  19 export class SearchComponent implements OnInit, OnDestroy {
  20   error: string
  21
  22   results: (Video | VideoChannel)[] = []
  23
  24   pagination = {
  25     currentPage: 1,
  26     totalItems: null as number
  27   }
  28   advancedSearch: AdvancedSearch = new AdvancedSearch()
  29   isSearchFilterCollapsed = true
  30   currentSearch: string
  31
  32   videoDisplayOptions: MiniatureDisplayOptions = {
  33     date: true,
  34     views: true,
  35     by: true,
  36     avatar: false,
  37     privacyLabel: false,
  38     privacyText: false,
  39     state: false,
  40     blacklistInfo: false
  41   }
  42
  43   errorMessage: string
  44
  45   userMiniature: User
  46
  47   private subActivatedRoute: Subscription
  48   private isInitialLoad = false // set to false to show the search filters on first arrival
  49
  50   private channelsPerPage = 2
  51   private playlistsPerPage = 2
  52   private videosPerPage = 10
  53
  54   private hasMoreResults = true
  55   private isSearching = false
  56
  57   private lastSearchTarget: SearchTargetType
  58
  59   private serverConfig: HTMLServerConfig
  60
  61   constructor (
  62     private route: ActivatedRoute,
  63     private router: Router,
  64     private metaService: MetaService,
  65     private notifier: Notifier,
  66     private searchService: SearchService,
  67     private authService: AuthService,
  68     private userService: UserService,
  69     private hooks: HooksService,
  70     private serverService: ServerService
  71   ) { }
  72
  73   ngOnInit () {
  74     this.serverConfig = this.serverService.getHTMLConfig()
  75
  76     this.subActivatedRoute = this.route.queryParams.subscribe(
  77       async queryParams => {
  78         const querySearch = queryParams['search']
  79         const searchTarget = queryParams['searchTarget']
  80
  81         // Search updated, reset filters
  82         if (this.currentSearch !== querySearch || searchTarget !== this.advancedSearch.searchTarget) {
  83           this.resetPagination()
  84           this.advancedSearch.reset()
  85
  86           this.currentSearch = querySearch || undefined
  87           this.updateTitle()
  88         }
  89
  90         this.advancedSearch = new AdvancedSearch(queryParams)
  91         if (!this.advancedSearch.searchTarget) {
  92           this.advancedSearch.searchTarget = this.getDefaultSearchTarget()
  93         }
  94
  95         this.error = this.checkFieldsAndGetError()
  96
  97         // Don't hide filters if we have some of them AND the user just came on the webpage, or we have an error
  98         this.isSearchFilterCollapsed = !this.error && (this.isInitialLoad === false || !this.advancedSearch.containsValues())
  99         this.isInitialLoad = false
 100
 101         this.search()
 102       },
 103
 104       err => this.notifier.error(err.text)
 105     )
 106
 107     this.userService.getAnonymousOrLoggedUser()
 108       .subscribe(user => this.userMiniature = user)
 109
 110     this.hooks.runAction('action:search.init', 'search')
 111   }
 112
 113   ngOnDestroy () {
 114     if (this.subActivatedRoute) this.subActivatedRoute.unsubscribe()
 115   }
 116
 117   isVideoChannel (d: VideoChannel | Video | VideoPlaylist): d is VideoChannel {
 118     return d instanceof VideoChannel
 119   }
 120
 121   isVideo (v: VideoChannel | Video | VideoPlaylist): v is Video {
 122     return v instanceof Video
 123   }
 124
 125   isPlaylist (v: VideoChannel | Video | VideoPlaylist): v is VideoPlaylist {
 126     return v instanceof VideoPlaylist
 127   }
 128
 129   isUserLoggedIn () {
 130     return this.authService.isLoggedIn()
 131   }
 132
 133   search () {
 134     this.error = this.checkFieldsAndGetError()
 135     if (this.error) return
 136
 137     this.isSearching = true
 138
 139     forkJoin([
 140       this.getVideoChannelObs(),
 141       this.getVideoPlaylistObs(),
 142       this.getVideosObs()
 143     ]).subscribe(results => {
 144       for (const result of results) {
 145         this.results = this.results.concat(result.data)
 146       }
 147
 148       this.pagination.totalItems = results.reduce((p, r) => p += r.total, 0)
 149       this.lastSearchTarget = this.advancedSearch.searchTarget
 150
 151       this.hasMoreResults = this.results.length < this.pagination.totalItems
 152     },
 153
 154     err => {
 155       if (this.advancedSearch.searchTarget !== 'search-index') {
 156         this.notifier.error(err.message)
 157         return
 158       }
 159
 160       this.notifier.error(
 161         $localize`Search index is unavailable. Retrying with instance results instead.`,
 162         $localize`Search error`
 163       )
 164       this.advancedSearch.searchTarget = 'local'
 165       this.search()
 166     },
 167
 168     () => {
 169       this.isSearching = false
 170     })
 171   }
 172
 173   onNearOfBottom () {
 174     // Last page
 175     if (!this.hasMoreResults || this.isSearching) return
 176
 177     this.pagination.currentPage += 1
 178     this.search()
 179   }
 180
 181   onFiltered () {
 182     this.resetPagination()
 183
 184     this.updateUrlFromAdvancedSearch()
 185   }
 186
 187   numberOfFilters () {
 188     return this.advancedSearch.size()
 189   }
 190
 191   // Add VideoChannel/VideoPlaylist for typings, but the template already checks "video" argument is a video
 192   removeVideoFromArray (video: Video | VideoChannel | VideoPlaylist) {
 193     this.results = this.results.filter(r => !this.isVideo(r) || r.id !== video.id)
 194   }
 195
 196   getLinkType (): LinkType {
 197     if (this.advancedSearch.searchTarget === 'search-index') {
 198       const remoteUriConfig = this.serverConfig.search.remoteUri
 199
 200       // Redirect on the external instance if not allowed to fetch remote data
 201       if ((!this.isUserLoggedIn() && !remoteUriConfig.anonymous) || !remoteUriConfig.users) {
 202         return 'external'
 203       }
 204
 205       return 'lazy-load'
 206     }
 207
 208     return 'internal'
 209   }
 210
 211   isExternalChannelUrl () {
 212     return this.getLinkType() === 'external'
 213   }
 214
 215   getExternalChannelUrl (channel: VideoChannel) {
 216     // Same algorithm than videos
 217     if (this.getLinkType() === 'external') {
 218       return channel.url
 219     }
 220
 221     // lazy-load or internal
 222     return undefined
 223   }
 224
 225   getInternalChannelUrl (channel: VideoChannel) {
 226     const linkType = this.getLinkType()
 227
 228     if (linkType === 'internal') {
 229       return [ '/c', channel.nameWithHost ]
 230     }
 231
 232     if (linkType === 'lazy-load') {
 233       return [ '/search/lazy-load-channel', { url: channel.url } ]
 234     }
 235
 236     // external
 237     return undefined
 238   }
 239
 240   hideActions () {
 241     return this.lastSearchTarget === 'search-index'
 242   }
 243
 244   private resetPagination () {
 245     this.pagination.currentPage = 1
 246     this.pagination.totalItems = null
 247     this.channelsPerPage = 2
 248
 249     this.results = []
 250   }
 251
 252   private updateTitle () {
 253     const suffix = this.currentSearch
 254       ? ' ' + this.currentSearch
 255       : ''
 256
 257     this.metaService.setTitle($localize`Search` + suffix)
 258   }
 259
 260   private updateUrlFromAdvancedSearch () {
 261     const search = this.currentSearch || undefined
 262
 263     this.router.navigate([], {
 264       relativeTo: this.route,
 265       queryParams: Object.assign({}, this.advancedSearch.toUrlObject(), { search })
 266     })
 267   }
 268
 269   private getVideosObs () {
 270     const params = {
 271       search: this.currentSearch,
 272       componentPagination: immutableAssign(this.pagination, { itemsPerPage: this.videosPerPage }),
 273       advancedSearch: this.advancedSearch
 274     }
 275
 276     return this.hooks.wrapObsFun(
 277       this.searchService.searchVideos.bind(this.searchService),
 278       params,
 279       'search',
 280       'filter:api.search.videos.list.params',
 281       'filter:api.search.videos.list.result'
 282     )
 283   }
 284
 285   private getVideoChannelObs () {
 286     if (!this.currentSearch) return of({ data: [], total: 0 })
 287
 288     const params = {
 289       search: this.currentSearch,
 290       componentPagination: immutableAssign(this.pagination, { itemsPerPage: this.channelsPerPage }),
 291       advancedSearch: this.advancedSearch
 292     }
 293
 294     return this.hooks.wrapObsFun(
 295       this.searchService.searchVideoChannels.bind(this.searchService),
 296       params,
 297       'search',
 298       'filter:api.search.video-channels.list.params',
 299       'filter:api.search.video-channels.list.result'
 300     )
 301   }
 302
 303   private getVideoPlaylistObs () {
 304     if (!this.currentSearch) return of({ data: [], total: 0 })
 305
 306     const params = {
 307       search: this.currentSearch,
 308       componentPagination: immutableAssign(this.pagination, { itemsPerPage: this.playlistsPerPage }),
 309       advancedSearch: this.advancedSearch
 310     }
 311
 312     return this.hooks.wrapObsFun(
 313       this.searchService.searchVideoPlaylists.bind(this.searchService),
 314       params,
 315       'search',
 316       'filter:api.search.video-playlists.list.params',
 317       'filter:api.search.video-playlists.list.result'
 318     )
 319   }
 320
 321   private getDefaultSearchTarget (): SearchTargetType {
 322     const searchIndexConfig = this.serverConfig.search.searchIndex
 323
 324     if (searchIndexConfig.enabled && (searchIndexConfig.isDefaultSearch || searchIndexConfig.disableLocalSearch)) {
 325       return 'search-index'
 326     }
 327
 328     return 'local'
 329   }
 330
 331   private checkFieldsAndGetError () {
 332     if (this.advancedSearch.host && !validateHost(this.advancedSearch.host)) {
 333       return $localize`PeerTube instance host filter is invalid`
 334     }
 335
 336     return undefined
 337   }
 338 }