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'
12 selector: 'my-search-typeahead',
13 templateUrl: './search-typeahead.component.html',
14 styleUrls: [ './search-typeahead.component.scss' ]
16 export class SearchTypeaheadComponent implements OnInit, AfterViewChecked, OnDestroy {
17 @ViewChildren(SuggestionComponent) suggestionItems: QueryList<SuggestionComponent>
21 areSuggestionsOpened = true
24 serverConfig: HTMLServerConfig
26 inThisChannelText: string
28 keyboardEventsManager: ListKeyManager<SuggestionComponent>
29 results: SuggestionPayload[] = []
31 activeSearch: SuggestionPayloadType
33 private scheduleKeyboardEventsInit = false
36 private authService: AuthService,
37 private router: Router,
38 private route: ActivatedRoute,
39 private serverService: ServerService
43 this.route.queryParams
44 .pipe(first(params => this.isOnSearch() && params.search !== undefined && params.search !== null))
45 .subscribe(params => this.search = params.search)
47 this.serverConfig = this.serverService.getHTMLConfig()
48 this.computeTypeahead()
50 this.serverService.configReloaded
51 .subscribe(config => {
52 this.serverConfig = config
53 this.computeTypeahead()
57 ngAfterViewChecked () {
58 if (this.scheduleKeyboardEventsInit && !this.keyboardEventsManager) {
59 // Avoid ExpressionChangedAfterItHasBeenCheckedError errors
60 setTimeout(() => this.initKeyboardEventsManager(), 0)
65 if (this.keyboardEventsManager) this.keyboardEventsManager.change.unsubscribe()
68 areInstructionsDisplayed () {
72 showSearchGlobalHelp () {
73 return this.search && this.areSuggestionsOpened && this.keyboardEventsManager?.activeItem?.result?.type === 'search-index'
77 if (!this.serverConfig) return false
79 return this.authService.isLoggedIn()
80 ? this.serverConfig.search.remoteUri.users
81 : this.serverConfig.search.remoteUri.anonymous
85 this.computeTypeahead()
88 initKeyboardEventsManager () {
89 if (this.keyboardEventsManager) return
91 this.keyboardEventsManager = new ListKeyManager(this.suggestionItems)
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 })
98 this.updateItemsState(activeIndex)
100 this.keyboardEventsManager.change.subscribe(
101 _ => this.updateItemsState()
105 computeTypeahead () {
106 const searchIndexConfig = this.serverConfig.search.searchIndex
108 if (!this.activeSearch) {
109 if (searchIndexConfig.enabled && (searchIndexConfig.isDefaultSearch || searchIndexConfig.disableLocalSearch)) {
110 this.activeSearch = 'search-index'
112 this.activeSearch = 'search-instance'
116 this.areSuggestionsOpened = true
119 if (!this.search) return
121 if (searchIndexConfig.enabled === false || searchIndexConfig.disableLocalSearch !== true) {
124 type: 'search-instance',
125 default: this.activeSearch === 'search-instance'
129 if (searchIndexConfig.enabled) {
132 type: 'search-index',
133 default: this.activeSearch === 'search-index'
137 this.scheduleKeyboardEventsInit = true
140 updateItemsState (index?: number) {
141 if (index !== undefined) {
142 this.keyboardEventsManager.setActiveItem(index)
145 for (const item of this.suggestionItems) {
146 if (this.keyboardEventsManager.activeItem && this.keyboardEventsManager.activeItem === item) {
148 this.activeSearch = item.result.type
156 onSuggestionClicked (payload: SuggestionPayload) {
157 this.doSearch(this.buildSearchTarget(payload))
160 onSuggestionHover (index: number) {
161 this.updateItemsState(index)
164 handleKey (event: KeyboardEvent) {
165 if (!this.keyboardEventsManager) return
170 event.stopPropagation()
172 this.keyboardEventsManager.onKeydown(event)
176 event.stopPropagation()
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?.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'