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