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