client/src/app/header/search-typeahead.component.ts

   1 import { of } from 'rxjs'
   2 import { first, tap } from 'rxjs/operators'
   3 import { ListKeyManager } from '@angular/cdk/a11y'
   4 import { AfterViewChecked, Component, OnDestroy, OnInit, QueryList, ViewChildren } from '@angular/core'
   5 import { ActivatedRoute, Params, Router } from '@angular/router'
   6 import { AuthService, ServerService } from '@app/core'
   7 import { logger } from '@root-helpers/logger'
   8 import { HTMLServerConfig, SearchTargetType } from '@shared/models'
   9 import { SuggestionComponent, SuggestionPayload, SuggestionPayloadType } from './suggestion.component'
  10
  11 @Component({
  12   selector: 'my-search-typeahead',
  13   templateUrl: './search-typeahead.component.html',
  14   styleUrls: [ './search-typeahead.component.scss' ]
  15 })
  16 export class SearchTypeaheadComponent implements OnInit, AfterViewChecked, OnDestroy {
  17   @ViewChildren(SuggestionComponent) suggestionItems: QueryList<SuggestionComponent>
  18
  19   hasChannel = false
  20   inChannel = false
  21   areSuggestionsOpened = true
  22
  23   search = ''
  24   serverConfig: HTMLServerConfig
  25
  26   inThisChannelText: string
  27
  28   keyboardEventsManager: ListKeyManager<SuggestionComponent>
  29   results: SuggestionPayload[] = []
  30
  31   activeSearch: SuggestionPayloadType
  32
  33   private scheduleKeyboardEventsInit = false
  34
  35   constructor (
  36     private authService: AuthService,
  37     private router: Router,
  38     private route: ActivatedRoute,
  39     private serverService: ServerService
  40   ) {}
  41
  42   ngOnInit () {
  43     this.route.queryParams
  44       .pipe(first(params => this.isOnSearch() && params.search !== undefined && params.search !== null))
  45       .subscribe(params => this.search = params.search)
  46
  47     this.serverConfig = this.serverService.getHTMLConfig()
  48     this.computeTypeahead()
  49
  50     this.serverService.configReloaded
  51       .subscribe(config => {
  52         this.serverConfig = config
  53         this.computeTypeahead()
  54       })
  55   }
  56
  57   ngAfterViewChecked () {
  58     if (this.scheduleKeyboardEventsInit && !this.keyboardEventsManager) {
  59       // Avoid ExpressionChangedAfterItHasBeenCheckedError errors
  60       setTimeout(() => this.initKeyboardEventsManager(), 0)
  61     }
  62   }
  63
  64   ngOnDestroy () {
  65     if (this.keyboardEventsManager) this.keyboardEventsManager.change.unsubscribe()
  66   }
  67
  68   areInstructionsDisplayed () {
  69     return !this.search
  70   }
  71
  72   showSearchGlobalHelp () {
  73     return this.search && this.areSuggestionsOpened && this.keyboardEventsManager?.activeItem?.result?.type === 'search-index'
  74   }
  75
  76   canSearchAnyURI () {
  77     if (!this.serverConfig) return false
  78
  79     return this.authService.isLoggedIn()
  80       ? this.serverConfig.search.remoteUri.users
  81       : this.serverConfig.search.remoteUri.anonymous
  82   }
  83
  84   onSearchChange () {
  85     this.computeTypeahead()
  86   }
  87
  88   initKeyboardEventsManager () {
  89     if (this.keyboardEventsManager) return
  90
  91     this.keyboardEventsManager = new ListKeyManager(this.suggestionItems)
  92
  93     const activeIndex = this.suggestionItems.toArray().findIndex(i => i.result.default === true)
  94     if (activeIndex === -1) {
  95       logger.error('Cannot find active index.', { suggestionItems: this.suggestionItems })
  96     }
  97
  98     this.updateItemsState(activeIndex)
  99
 100     this.keyboardEventsManager.change.subscribe(
 101       _ => this.updateItemsState()
 102     )
 103   }
 104
 105   computeTypeahead () {
 106     const searchIndexConfig = this.serverConfig.search.searchIndex
 107
 108     if (!this.activeSearch) {
 109       if (searchIndexConfig.enabled && (searchIndexConfig.isDefaultSearch || searchIndexConfig.disableLocalSearch)) {
 110         this.activeSearch = 'search-index'
 111       } else {
 112         this.activeSearch = 'search-instance'
 113       }
 114     }
 115
 116     this.areSuggestionsOpened = true
 117     this.results = []
 118
 119     if (!this.search) return
 120
 121     if (searchIndexConfig.enabled === false || searchIndexConfig.disableLocalSearch !== true) {
 122       this.results.push({
 123         text: this.search,
 124         type: 'search-instance',
 125         default: this.activeSearch === 'search-instance'
 126       })
 127     }
 128
 129     if (searchIndexConfig.enabled) {
 130       this.results.push({
 131         text: this.search,
 132         type: 'search-index',
 133         default: this.activeSearch === 'search-index'
 134       })
 135     }
 136
 137     this.scheduleKeyboardEventsInit = true
 138   }
 139
 140   updateItemsState (index?: number) {
 141     if (index !== undefined) {
 142       this.keyboardEventsManager.setActiveItem(index)
 143     }
 144
 145     for (const item of this.suggestionItems) {
 146       if (this.keyboardEventsManager.activeItem && this.keyboardEventsManager.activeItem === item) {
 147         item.active = true
 148         this.activeSearch = item.result.type
 149         continue
 150       }
 151
 152       item.active = false
 153     }
 154   }
 155
 156   onSuggestionClicked (payload: SuggestionPayload) {
 157     this.doSearch(this.buildSearchTarget(payload))
 158   }
 159
 160   onSuggestionHover (index: number) {
 161     this.updateItemsState(index)
 162   }
 163
 164   handleKey (event: KeyboardEvent) {
 165     if (!this.keyboardEventsManager) return
 166
 167     switch (event.key) {
 168       case 'ArrowDown':
 169       case 'ArrowUp':
 170         event.stopPropagation()
 171
 172         this.keyboardEventsManager.onKeydown(event)
 173         break
 174
 175       case 'Enter':
 176         event.stopPropagation()
 177         this.doSearch()
 178         break
 179     }
 180   }
 181
 182   isOnSearch () {
 183     return window.location.pathname === '/search'
 184   }
 185
 186   doSearch (searchTarget?: SearchTargetType) {
 187     this.areSuggestionsOpened = false
 188     const queryParams: Params = {}
 189
 190     if (this.isOnSearch() && this.route.snapshot.queryParams) {
 191       Object.assign(queryParams, this.route.snapshot.queryParams)
 192     }
 193
 194     if (!searchTarget) {
 195       searchTarget = this.buildSearchTarget(this.keyboardEventsManager.activeItem.result)
 196     }
 197
 198     Object.assign(queryParams, { search: this.search, searchTarget })
 199
 200     const o = this.authService.isLoggedIn()
 201       ? this.loadUserLanguagesIfNeeded(queryParams)
 202       : of(true)
 203
 204     o.subscribe(() => this.router.navigate([ '/search' ], { queryParams }))
 205   }
 206
 207   private loadUserLanguagesIfNeeded (queryParams: any) {
 208     if (queryParams?.languageOneOf) return of(queryParams)
 209
 210     return this.authService.userInformationLoaded
 211                .pipe(
 212                  first(),
 213                  tap(() => Object.assign(queryParams, { languageOneOf: this.authService.getUser().videoLanguages }))
 214                )
 215   }
 216
 217   private buildSearchTarget (result: SuggestionPayload): SearchTargetType {
 218     if (result.type === 'search-index') {
 219       return 'search-index'
 220     }
 221
 222     return 'local'
 223   }
 224 }