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