1 import { of } from 'rxjs'
2 import { first, tap, delay } from 'rxjs/operators'
3 import { ListKeyManager } from '@angular/cdk/a11y'
4 import { AfterViewInit, Component, ElementRef, OnDestroy, OnInit, QueryList, ViewChild, ViewChildren, AfterViewChecked } from '@angular/core'
5 import { ActivatedRoute, Params, Router } from '@angular/router'
6 import { AuthService, ServerService } from '@app/core'
7 import { ServerConfig } from '@shared/models'
8 import { SearchTargetType } from '@shared/models/search/search-target-query.model'
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, AfterViewInit, AfterViewChecked, OnDestroy {
17 @ViewChildren(SuggestionComponent) suggestionItems: QueryList<SuggestionComponent>
21 areSuggestionsOpened = true
24 serverConfig: ServerConfig
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)
49 this.serverService.getConfig()
50 .subscribe(config => {
51 this.serverConfig = config
53 this.computeTypeahead()
55 this.serverService.configReloaded
56 .subscribe(config => {
57 this.serverConfig = config
58 this.computeTypeahead()
63 ngAfterViewChecked () {
64 if (this.scheduleKeyboardEventsInit && !this.keyboardEventsManager) {
65 // Avoid ExpressionChangedAfterItHasBeenCheckedError errors
66 setTimeout(() => this.initKeyboardEventsManager(), 0)
71 if (this.keyboardEventsManager) this.keyboardEventsManager.change.unsubscribe()
74 areInstructionsDisplayed () {
78 showSearchGlobalHelp () {
79 return this.search && this.areSuggestionsOpened && this.keyboardEventsManager?.activeItem?.result?.type === 'search-index'
83 if (!this.serverConfig) return false
85 return this.authService.isLoggedIn()
86 ? this.serverConfig.search.remoteUri.users
87 : this.serverConfig.search.remoteUri.anonymous
91 this.computeTypeahead()
94 initKeyboardEventsManager () {
95 if (this.keyboardEventsManager) return
97 this.keyboardEventsManager = new ListKeyManager(this.suggestionItems)
99 const activeIndex = this.suggestionItems.toArray().findIndex(i => i.result.default === true)
100 if (activeIndex === -1) {
101 console.error('Cannot find active index.', { suggestionItems: this.suggestionItems })
104 this.updateItemsState(activeIndex)
106 this.keyboardEventsManager.change.subscribe(
107 _ => this.updateItemsState()
111 computeTypeahead () {
112 const searchIndexConfig = this.serverConfig.search.searchIndex
114 if (!this.activeSearch) {
115 if (searchIndexConfig.enabled && (searchIndexConfig.isDefaultSearch || searchIndexConfig.disableLocalSearch)) {
116 this.activeSearch = 'search-index'
118 this.activeSearch = 'search-instance'
122 this.areSuggestionsOpened = true
125 if (!this.search) return
127 if (searchIndexConfig.enabled === false || searchIndexConfig.disableLocalSearch !== true) {
130 type: 'search-instance',
131 default: this.activeSearch === 'search-instance'
135 if (searchIndexConfig.enabled) {
138 type: 'search-index',
139 default: this.activeSearch === 'search-index'
143 this.scheduleKeyboardEventsInit = true
146 updateItemsState (index?: number) {
147 if (index !== undefined) {
148 this.keyboardEventsManager.setActiveItem(index)
151 for (const item of this.suggestionItems) {
152 if (this.keyboardEventsManager.activeItem && this.keyboardEventsManager.activeItem === item) {
154 this.activeSearch = item.result.type
162 onSuggestionlicked (payload: SuggestionPayload) {
163 this.doSearch(this.buildSearchTarget(payload))
166 onSuggestionHover (index: number) {
167 this.updateItemsState(index)
170 handleKey (event: KeyboardEvent) {
171 if (!this.keyboardEventsManager) return
176 event.stopPropagation()
178 this.keyboardEventsManager.onKeydown(event)
184 return window.location.pathname === '/search'
187 doSearch (searchTarget?: SearchTargetType) {
188 this.areSuggestionsOpened = false
189 const queryParams: Params = {}
191 if (this.isOnSearch() && this.route.snapshot.queryParams) {
192 Object.assign(queryParams, this.route.snapshot.queryParams)
196 searchTarget = this.buildSearchTarget(this.keyboardEventsManager.activeItem.result)
199 Object.assign(queryParams, { search: this.search, searchTarget })
201 const o = this.authService.isLoggedIn()
202 ? this.loadUserLanguagesIfNeeded(queryParams)
205 o.subscribe(() => this.router.navigate([ '/search' ], { queryParams }))
208 private loadUserLanguagesIfNeeded (queryParams: any) {
209 if (queryParams && queryParams.languageOneOf) return of(queryParams)
211 return this.authService.userInformationLoaded
214 tap(() => Object.assign(queryParams, { languageOneOf: this.authService.getUser().videoLanguages }))
218 private buildSearchTarget (result: SuggestionPayload): SearchTargetType {
219 if (result.type === 'search-index') {
220 return 'search-index'