X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fapp%2Fheader%2Fsearch-typeahead.component.ts;h=c546628ee66fb52b820fad529aed4de46fe4dd76;hb=5c0904fc664e3eb04ac75a9430c1297c2a14f853;hp=c265f2c83d16777777621a8ba3205adffbed7471;hpb=9b8a7aa8ea128f7e197ff38ca9f86ffa53bbe110;p=github%2FChocobozzz%2FPeerTube.git diff --git a/client/src/app/header/search-typeahead.component.ts b/client/src/app/header/search-typeahead.component.ts index c265f2c83..c546628ee 100644 --- a/client/src/app/header/search-typeahead.component.ts +++ b/client/src/app/header/search-typeahead.component.ts @@ -1,33 +1,23 @@ -import { - Component, - AfterViewInit, - OnInit, - OnDestroy, - QueryList, - ViewChild, - ElementRef -} from '@angular/core' -import { Router, Params, ActivatedRoute } from '@angular/router' -import { AuthService, ServerService } from '@app/core' +import { of } from 'rxjs' 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 { of } from 'rxjs' -import { getParameterByName } from '@app/shared/misc/utils' -import { ServerConfig } from '@shared/models' +import { AfterViewChecked, AfterViewInit, Component, OnDestroy, OnInit, QueryList, ViewChildren } from '@angular/core' +import { ActivatedRoute, Params, Router } from '@angular/router' +import { AuthService, ServerService } from '@app/core' +import { SearchTargetType, ServerConfig } from '@shared/models' +import { SuggestionComponent, SuggestionPayload, SuggestionPayloadType } from './suggestion.component' @Component({ selector: 'my-search-typeahead', templateUrl: './search-typeahead.component.html', styleUrls: [ './search-typeahead.component.scss' ] }) -export class SearchTypeaheadComponent implements OnInit, OnDestroy, AfterViewInit { - @ViewChild('searchVideo', { static: true }) searchInput: ElementRef +export class SearchTypeaheadComponent implements OnInit, AfterViewInit, AfterViewChecked, OnDestroy { + @ViewChildren(SuggestionComponent) suggestionItems: QueryList hasChannel = false inChannel = false - newSearch = true + areSuggestionsOpened = true search = '' serverConfig: ServerConfig @@ -35,7 +25,11 @@ export class SearchTypeaheadComponent implements OnInit, OnDestroy, AfterViewIni inThisChannelText: string keyboardEventsManager: ListKeyManager - results: any[] = [] + results: SuggestionPayload[] = [] + + activeSearch: SuggestionPayloadType + + private scheduleKeyboardEventsInit = false constructor ( private authService: AuthService, @@ -45,125 +39,163 @@ export class SearchTypeaheadComponent implements OnInit, OnDestroy, AfterViewIni ) {} ngOnInit () { - this.serverService.getConfig() - .subscribe(config => this.serverConfig = config) + this.route.queryParams + .pipe(first(params => this.isOnSearch() && params.search !== undefined && params.search !== null)) + .subscribe(params => this.search = params.search) } - ngOnDestroy () { - if (this.keyboardEventsManager) this.keyboardEventsManager.change.unsubscribe() + ngAfterViewInit () { + this.serverService.getConfig() + .subscribe(config => { + this.serverConfig = config + + this.computeTypeahead() + + this.serverService.configReloaded + .subscribe(config => { + this.serverConfig = config + this.computeTypeahead() + }) + }) } - ngAfterViewInit () { - this.search = getParameterByName('search', window.location.href) || '' + ngAfterViewChecked () { + if (this.scheduleKeyboardEventsInit && !this.keyboardEventsManager) { + // Avoid ExpressionChangedAfterItHasBeenCheckedError errors + setTimeout(() => this.initKeyboardEventsManager(), 0) + } } - get activeResult () { - return this.keyboardEventsManager && this.keyboardEventsManager.activeItem && this.keyboardEventsManager.activeItem.result + ngOnDestroy () { + if (this.keyboardEventsManager) this.keyboardEventsManager.change.unsubscribe() } - get showInstructions () { + areInstructionsDisplayed () { return !this.search } - get showHelp () { - return this.search && this.newSearch && this.activeResult && this.activeResult.type === 'search-global' || false + showSearchGlobalHelp () { + return this.search && this.areSuggestionsOpened && this.keyboardEventsManager?.activeItem?.result?.type === 'search-index' } - get anyURI () { + canSearchAnyURI () { if (!this.serverConfig) return false + return this.authService.isLoggedIn() ? this.serverConfig.search.remoteUri.users : this.serverConfig.search.remoteUri.anonymous } onSearchChange () { - this.computeResults() - } - - computeResults () { - this.newSearch = true - let results: Result[] = [] - - if (this.search) { - results = [ - /* Channel search is still unimplemented. Uncomment when it is. - { - text: this.search, - type: 'search-channel' - }, - */ - { - text: this.search, - type: 'search-instance', - default: true - }, - /* Global search is still unimplemented. Uncomment when it is. - { - text: this.search, - type: 'search-global' - }, - */ - ...results - ] + this.computeTypeahead() + } + + initKeyboardEventsManager () { + if (this.keyboardEventsManager) return + + this.keyboardEventsManager = new ListKeyManager(this.suggestionItems) + + const activeIndex = this.suggestionItems.toArray().findIndex(i => i.result.default === true) + if (activeIndex === -1) { + console.error('Cannot find active index.', { suggestionItems: this.suggestionItems }) } - this.results = results.filter( - (result: Result) => { - // if we're not in a channel or one of its videos/playlits, show all channel-related results - if (!(this.hasChannel || this.inChannel)) return !result.type.includes('channel') - // if we're in a channel, show all channel-related results except for the channel redirection itself - if (this.inChannel) return result.type !== 'channel' - // all other result types are kept - return true - } + this.updateItemsState(activeIndex) + + this.keyboardEventsManager.change.subscribe( + _ => this.updateItemsState() ) } - setEventItems (event: { items: QueryList, index?: number }) { - event.items.forEach(e => { - if (this.keyboardEventsManager.activeItem && this.keyboardEventsManager.activeItem === e) { - this.keyboardEventsManager.activeItem.active = true + computeTypeahead () { + const searchIndexConfig = this.serverConfig.search.searchIndex + + if (!this.activeSearch) { + if (searchIndexConfig.enabled && (searchIndexConfig.isDefaultSearch || searchIndexConfig.disableLocalSearch)) { + this.activeSearch = 'search-index' } else { - e.active = false + this.activeSearch = 'search-instance' } - }) + } + + this.areSuggestionsOpened = true + this.results = [] + + if (!this.search) return + + if (searchIndexConfig.enabled === false || searchIndexConfig.disableLocalSearch !== true) { + this.results.push({ + text: this.search, + type: 'search-instance', + default: this.activeSearch === 'search-instance' + }) + } + + if (searchIndexConfig.enabled) { + this.results.push({ + text: this.search, + type: 'search-index', + default: this.activeSearch === 'search-index' + }) + } + + this.scheduleKeyboardEventsInit = true } - initKeyboardEventsManager (event: { items: QueryList, 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() + updateItemsState (index?: number) { + if (index !== undefined) { + this.keyboardEventsManager.setActiveItem(index) } - this.keyboardEventsManager.change.subscribe( - _ => this.setEventItems(event) - ) + + for (const item of this.suggestionItems) { + if (this.keyboardEventsManager.activeItem && this.keyboardEventsManager.activeItem === item) { + item.active = true + this.activeSearch = item.result.type + continue + } + + item.active = false + } + } + + onSuggestionlicked (payload: SuggestionPayload) { + this.doSearch(this.buildSearchTarget(payload)) + } + + onSuggestionHover (index: number) { + this.updateItemsState(index) } - handleKeyUp (event: KeyboardEvent, indexSelected?: number) { - event.stopImmediatePropagation() - if (this.keyboardEventsManager) { - if (event.keyCode === DOWN_ARROW || event.keyCode === UP_ARROW) { + handleKey (event: KeyboardEvent) { + if (!this.keyboardEventsManager) return + + switch (event.key) { + case 'ArrowDown': + case 'ArrowUp': + event.stopPropagation() + this.keyboardEventsManager.onKeydown(event) - return false - } else if (event.keyCode === ENTER) { - this.newSearch = false - this.doSearch() - return false - } + break } } - doSearch () { + isOnSearch () { + return window.location.pathname === '/search' + } + + doSearch (searchTarget?: SearchTargetType) { + this.areSuggestionsOpened = 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) } - Object.assign(queryParams, { search: this.search }) + if (!searchTarget) { + searchTarget = this.buildSearchTarget(this.keyboardEventsManager.activeItem.result) + } + + Object.assign(queryParams, { search: this.search, searchTarget }) const o = this.authService.isLoggedIn() ? this.loadUserLanguagesIfNeeded(queryParams) @@ -181,4 +213,12 @@ export class SearchTypeaheadComponent implements OnInit, OnDestroy, AfterViewIni tap(() => Object.assign(queryParams, { languageOneOf: this.authService.getUser().videoLanguages })) ) } + + private buildSearchTarget (result: SuggestionPayload): SearchTargetType { + if (result.type === 'search-index') { + return 'search-index' + } + + return 'local' + } }