-import {
- Component,
- AfterViewInit,
- OnInit,
- OnDestroy,
- QueryList,
- ViewChild,
- ElementRef
-} from '@angular/core'
-import { Router, Params, ActivatedRoute } from '@angular/router'
+import { Component, ElementRef, OnDestroy, OnInit, QueryList, ViewChild } from '@angular/core'
+import { ActivatedRoute, Params, Router } from '@angular/router'
import { AuthService, ServerService } from '@app/core'
import { first, tap } from 'rxjs/operators'
import { ListKeyManager } from '@angular/cdk/a11y'
-import { UP_ARROW, DOWN_ARROW, ENTER } from '@angular/cdk/keycodes'
-import { SuggestionComponent, Result } from './suggestion.component'
+import { Result, SuggestionComponent } from './suggestion.component'
import { of } from 'rxjs'
-import { getParameterByName } from '@app/shared/misc/utils'
import { ServerConfig } from '@shared/models'
@Component({
templateUrl: './search-typeahead.component.html',
styleUrls: [ './search-typeahead.component.scss' ]
})
-export class SearchTypeaheadComponent implements OnInit, OnDestroy, AfterViewInit {
+export class SearchTypeaheadComponent implements OnInit, OnDestroy {
@ViewChild('searchVideo', { static: true }) searchInput: ElementRef<HTMLInputElement>
hasChannel = false
inThisChannelText: string
keyboardEventsManager: ListKeyManager<SuggestionComponent>
- results: any[] = []
+ results: Result[] = []
constructor (
private authService: AuthService,
) {}
ngOnInit () {
+ this.route.queryParams
+ .pipe(first(params => this.isOnSearch() && params.search !== undefined && params.search !== null))
+ .subscribe(params => this.search = params.search)
this.serverService.getConfig()
.subscribe(config => this.serverConfig = config)
}
if (this.keyboardEventsManager) this.keyboardEventsManager.change.unsubscribe()
}
- ngAfterViewInit () {
- this.search = getParameterByName('search', window.location.href) || ''
- }
-
get activeResult () {
- return this.keyboardEventsManager && this.keyboardEventsManager.activeItem && this.keyboardEventsManager.activeItem.result
+ return this.keyboardEventsManager?.activeItem?.result
}
- get showInstructions () {
+ get areInstructionsDisplayed () {
return !this.search
}
get showHelp () {
- return this.search && this.newSearch && this.activeResult && this.activeResult.type === 'search-global' || false
+ return this.search && this.newSearch && this.activeResult?.type === 'search-global'
}
- get anyURI () {
+ get canSearchAnyURI () {
if (!this.serverConfig) return false
return this.authService.isLoggedIn()
? this.serverConfig.search.remoteUri.users
initKeyboardEventsManager (event: { items: QueryList<SuggestionComponent>, index?: number }) {
if (this.keyboardEventsManager) this.keyboardEventsManager.change.unsubscribe()
+
this.keyboardEventsManager = new ListKeyManager(event.items)
+
if (event.index !== undefined) {
this.keyboardEventsManager.setActiveItem(event.index)
} else {
this.keyboardEventsManager.setFirstItemActive()
}
+
this.keyboardEventsManager.change.subscribe(
_ => this.setEventItems(event)
)
}
- handleKeyUp (event: KeyboardEvent, indexSelected?: number) {
+ handleKey (event: KeyboardEvent) {
event.stopImmediatePropagation()
- if (this.keyboardEventsManager) {
- if (event.keyCode === DOWN_ARROW || event.keyCode === UP_ARROW) {
+ if (!this.keyboardEventsManager) return
+
+ switch (event.key) {
+ case 'ArrowDown':
+ case 'ArrowUp':
this.keyboardEventsManager.onKeydown(event)
- return false
- } else if (event.keyCode === ENTER) {
- this.newSearch = false
- this.doSearch()
- return false
- }
+ break
}
}
+ isOnSearch () {
+ return window.location.pathname === '/search'
+ }
+
doSearch () {
+ this.newSearch = false
const queryParams: Params = {}
- if (window.location.pathname === '/search' && this.route.snapshot.queryParams) {
+ if (this.isOnSearch() && this.route.snapshot.queryParams) {
Object.assign(queryParams, this.route.snapshot.queryParams)
}