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

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