1 import { of } from 'rxjs'
2 import { first, tap } from 'rxjs/operators'
3 import { ListKeyManager } from '@angular/cdk/a11y'
4 import { AfterViewChecked, AfterViewInit, 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 { SearchTargetType, ServerConfig } from '@shared/models'
8 import { SuggestionComponent, SuggestionPayload, SuggestionPayloadType } from './suggestion.component'
11 selector: 'my-search-typeahead',
12 templateUrl: './search-typeahead.component.html',
13 styleUrls: [ './search-typeahead.component.scss' ]
15 export class SearchTypeaheadComponent implements OnInit, AfterViewInit, AfterViewChecked, OnDestroy {
16 @ViewChildren(SuggestionComponent) suggestionItems: QueryList<SuggestionComponent>
20 areSuggestionsOpened = true
23 serverConfig: ServerConfig
25 inThisChannelText: string
27 keyboardEventsManager: ListKeyManager<SuggestionComponent>
28 results: SuggestionPayload[] = []
30 activeSearch: SuggestionPayloadType
32 private scheduleKeyboardEventsInit = false
35 private authService: AuthService,
36 private router: Router,
37 private route: ActivatedRoute,
38 private serverService: ServerService
42 this.route.queryParams
43 .pipe(first(params => this.isOnSearch() && params.search !== undefined && params.search !== null))
44 .subscribe(params => this.search = params.search)
48 this.serverService.getConfig()
49 .subscribe(config => {
50 this.serverConfig = config
52 this.computeTypeahead()
54 this.serverService.configReloaded
55 .subscribe(config => {
56 this.serverConfig = config
57 this.computeTypeahead()
62 ngAfterViewChecked () {
63 if (this.scheduleKeyboardEventsInit && !this.keyboardEventsManager) {
64 // Avoid ExpressionChangedAfterItHasBeenCheckedError errors
65 setTimeout(() => this.initKeyboardEventsManager(), 0)
70 if (this.keyboardEventsManager) this.keyboardEventsManager.change.unsubscribe()
73 areInstructionsDisplayed () {
77 showSearchGlobalHelp () {
78 return this.search && this.areSuggestionsOpened && this.keyboardEventsManager?.activeItem?.result?.type === 'search-index'
82 if (!this.serverConfig) return false
84 return this.authService.isLoggedIn()
85 ? this.serverConfig.search.remoteUri.users
86 : this.serverConfig.search.remoteUri.anonymous
90 this.computeTypeahead()
93 initKeyboardEventsManager () {
94 if (this.keyboardEventsManager) return
96 this.keyboardEventsManager = new ListKeyManager(this.suggestionItems)
98 const activeIndex = this.suggestionItems.toArray().findIndex(i => i.result.default === true)
99 if (activeIndex === -1) {
100 console.error('Cannot find active index.', { suggestionItems: this.suggestionItems })
103 this.updateItemsState(activeIndex)
105 this.keyboardEventsManager.change.subscribe(
106 _ => this.updateItemsState()
110 computeTypeahead () {
111 const searchIndexConfig = this.serverConfig.search.searchIndex
113 if (!this.activeSearch) {
114 if (searchIndexConfig.enabled && (searchIndexConfig.isDefaultSearch || searchIndexConfig.disableLocalSearch)) {
115 this.activeSearch = 'search-index'
117 this.activeSearch = 'search-instance'
121 this.areSuggestionsOpened = true
124 if (!this.search) return
126 if (searchIndexConfig.enabled === false || searchIndexConfig.disableLocalSearch !== true) {
129 type: 'search-instance',
130 default: this.activeSearch === 'search-instance'
134 if (searchIndexConfig.enabled) {
137 type: 'search-index',
138 default: this.activeSearch === 'search-index'
142 this.scheduleKeyboardEventsInit = true
145 updateItemsState (index?: number) {
146 if (index !== undefined) {
147 this.keyboardEventsManager.setActiveItem(index)
150 for (const item of this.suggestionItems) {
151 if (this.keyboardEventsManager.activeItem && this.keyboardEventsManager.activeItem === item) {
153 this.activeSearch = item.result.type
161 onSuggestionlicked (payload: SuggestionPayload) {
162 this.doSearch(this.buildSearchTarget(payload))
165 onSuggestionHover (index: number) {
166 this.updateItemsState(index)
169 handleKey (event: KeyboardEvent) {
170 if (!this.keyboardEventsManager) return
175 event.stopPropagation()
177 this.keyboardEventsManager.onKeydown(event)
183 return window.location.pathname === '/search'
186 doSearch (searchTarget?: SearchTargetType) {
187 this.areSuggestionsOpened = false
188 const queryParams: Params = {}
190 if (this.isOnSearch() && this.route.snapshot.queryParams) {
191 Object.assign(queryParams, this.route.snapshot.queryParams)
195 searchTarget = this.buildSearchTarget(this.keyboardEventsManager.activeItem.result)
198 Object.assign(queryParams, { search: this.search, searchTarget })
200 const o = this.authService.isLoggedIn()
201 ? this.loadUserLanguagesIfNeeded(queryParams)
204 o.subscribe(() => this.router.navigate([ '/search' ], { queryParams }))
207 private loadUserLanguagesIfNeeded (queryParams: any) {
208 if (queryParams && queryParams.languageOneOf) return of(queryParams)
210 return this.authService.userInformationLoaded
213 tap(() => Object.assign(queryParams, { languageOneOf: this.authService.getUser().videoLanguages }))
217 private buildSearchTarget (result: SuggestionPayload): SearchTargetType {
218 if (result.type === 'search-index') {
219 return 'search-index'