1 import { Component, ViewChild, ElementRef, AfterViewInit, OnInit } from '@angular/core'
2 import { Router, NavigationEnd } from '@angular/router'
3 import { AuthService } from '@app/core'
4 import { I18n } from '@ngx-translate/i18n-polyfill'
5 import { filter } from 'rxjs/operators'
6 import { ListKeyManager, ListKeyManagerOption } from '@angular/cdk/a11y'
7 import { UP_ARROW, DOWN_ARROW, ENTER } from '@angular/cdk/keycodes'
10 selector: 'my-search-typeahead',
11 templateUrl: './search-typeahead.component.html',
12 styleUrls: [ './search-typeahead.component.scss' ]
14 export class SearchTypeaheadComponent implements OnInit, AfterViewInit {
15 @ViewChild('contentWrapper', { static: true }) contentWrapper: ElementRef
16 @ViewChild('optionsList', { static: true }) optionsList: ElementRef
20 keyboardEventsManager: ListKeyManager<ListKeyManagerOption>
22 searchInput: HTMLInputElement
23 URIPolicy: 'only-followed' | 'any' = 'any'
27 inThisChannelText: string
32 private authService: AuthService,
33 private router: Router,
36 this.URIPolicyText = this.i18n('Determines whether you can resolve any distant content from its URL, or if your instance only allows doing so for instances it follows.')
37 this.inAllText = this.i18n('In all PeerTube')
38 this.inThisChannelText = this.i18n('In this channel')
43 .pipe(filter(event => event instanceof NavigationEnd))
44 .subscribe((event: NavigationEnd) => {
45 this.hasChannel = event.url.startsWith('/videos/watch')
46 this.inChannel = event.url.startsWith('/video-channels')
52 this.searchInput = this.contentWrapper.nativeElement.childNodes[0]
53 this.searchInput.addEventListener('input', this.computeResults.bind(this))
57 return !!this.searchInput && !!this.searchInput.value
63 text: 'MaƮtre poney',
71 text: this.searchInput.value,
72 type: 'search-channel'
75 text: this.searchInput.value,
82 this.results = results.filter(
84 // if we're not in a channel or one of its videos/playlits, show all channel-related results
85 if (!(this.hasChannel || this.inChannel)) return !result.type.includes('channel')
86 // if we're in a channel, show all channel-related results except for the channel redirection itself
87 if (this.inChannel) return !(result.type === 'channel')
94 return this.authService.isLoggedIn()
97 handleKeyUp (event: KeyboardEvent) {
98 event.stopImmediatePropagation()
99 if (this.keyboardEventsManager) {
100 if (event.keyCode === DOWN_ARROW || event.keyCode === UP_ARROW) {
101 // passing the event to key manager so we get a change fired
102 this.keyboardEventsManager.onKeydown(event)
104 } else if (event.keyCode === ENTER) {
105 // when we hit enter, the keyboardManager should call the selectItem method of the `ListItemComponent`
106 // this.keyboardEventsManager.activeItem