X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fapp%2Fheader%2Fsearch-typeahead.component.ts;h=0794ec8f4774e7f3d71b70cf1bd7d593927b2786;hb=601b661315491ecde1002c5a08e7fdf75dfab574;hp=9b414bc568b3496333f206a67e86c4325ea12238;hpb=9677fca772349248925da6c5f34f600e9a2abbe6;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 9b414bc56..0794ec8f4 100644
--- a/client/src/app/header/search-typeahead.component.ts
+++ b/client/src/app/header/search-typeahead.component.ts
@@ -1,193 +1,200 @@
-import {
-  Component,
-  ViewChild,
-  ElementRef,
-  AfterViewInit,
-  OnInit,
-  OnDestroy,
-  QueryList
-} from '@angular/core'
-import { Router, NavigationEnd, Params, ActivatedRoute } from '@angular/router'
-import { AuthService, ServerService } from '@app/core'
-import { I18n } from '@ngx-translate/i18n-polyfill'
-import { filter, first, tap, map } 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 { first, tap } from 'rxjs/operators'
+import { ListKeyManager } from '@angular/cdk/a11y'
+import { AfterViewChecked, Component, OnDestroy, OnInit, QueryList, ViewChildren } from '@angular/core'
+import { ActivatedRoute, Params, Router } from '@angular/router'
+import { AuthService, ServerService } from '@app/core'
+import { HTMLServerConfig, SearchTargetType } 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('contentWrapper', { static: true }) contentWrapper: ElementRef
+export class SearchTypeaheadComponent implements OnInit, AfterViewChecked, OnDestroy {
+  @ViewChildren(SuggestionComponent) suggestionItems: QueryList<SuggestionComponent>
 
   hasChannel = false
   inChannel = false
-  newSearch = true
+  areSuggestionsOpened = true
 
-  searchInput: HTMLInputElement
-  serverConfig: ServerConfig
+  search = ''
+  serverConfig: HTMLServerConfig
 
-  URIPolicyText: string
-  inAllText: string
   inThisChannelText: string
-  globalSearchIndex = 'https://index.joinpeertube.org'
 
   keyboardEventsManager: ListKeyManager<SuggestionComponent>
-  results: any[] = []
+  results: SuggestionPayload[] = []
+
+  activeSearch: SuggestionPayloadType
+
+  private scheduleKeyboardEventsInit = false
 
   constructor (
     private authService: AuthService,
     private router: Router,
     private route: ActivatedRoute,
-    private serverService: ServerService,
-    private i18n: I18n
-  ) {
-    this.URIPolicyText = this.i18n('Determines whether you can resolve any distant content, or if your instance only allows doing so for instances it follows.')
-    this.inAllText = this.i18n('In all PeerTube')
-    this.inThisChannelText = this.i18n('In this channel')
-  }
+    private serverService: ServerService
+  ) {}
 
   ngOnInit () {
-    this.router.events
-      .pipe(filter(e => e instanceof NavigationEnd))
-      .subscribe((event: NavigationEnd) => {
-        this.hasChannel = event.url.startsWith('/videos/watch')
-        this.inChannel = event.url.startsWith('/video-channels')
-        this.computeResults()
-      })
+    this.route.queryParams
+      .pipe(first(params => this.isOnSearch() && params.search !== undefined && params.search !== null))
+      .subscribe(params => this.search = params.search)
 
-    this.router.events
-      .pipe(
-        filter(e => e instanceof NavigationEnd),
-        map(() => getParameterByName('search', window.location.href))
-      )
-      .subscribe(searchQuery => this.searchInput.value = searchQuery || '')
+    this.serverConfig = this.serverService.getHTMLConfig()
+    this.computeTypeahead()
 
-    this.serverService.getConfig()
-      .subscribe(config => this.serverConfig = config)
+    this.serverService.configReloaded
+      .subscribe(config => {
+        this.serverConfig = config
+        this.computeTypeahead()
+      })
+  }
+
+  ngAfterViewChecked () {
+    if (this.scheduleKeyboardEventsInit && !this.keyboardEventsManager) {
+      // Avoid ExpressionChangedAfterItHasBeenCheckedError errors
+      setTimeout(() => this.initKeyboardEventsManager(), 0)
+    }
   }
 
   ngOnDestroy () {
     if (this.keyboardEventsManager) this.keyboardEventsManager.change.unsubscribe()
   }
 
-  ngAfterViewInit () {
-    this.searchInput = this.contentWrapper.nativeElement.childNodes[0]
-    this.searchInput.addEventListener('input', this.computeResults.bind(this))
-    this.searchInput.addEventListener('keyup', this.handleKeyUp.bind(this))
+  areInstructionsDisplayed () {
+    return !this.search
   }
 
-  get hasSearch () {
-    return !!this.searchInput && !!this.searchInput.value
+  showSearchGlobalHelp () {
+    return this.search && this.areSuggestionsOpened && this.keyboardEventsManager?.activeItem?.result?.type === 'search-index'
   }
 
-  get activeResult () {
-    return this.keyboardEventsManager && this.keyboardEventsManager.activeItem && this.keyboardEventsManager.activeItem.result
+  canSearchAnyURI () {
+    if (!this.serverConfig) return false
+
+    return this.authService.isLoggedIn()
+      ? this.serverConfig.search.remoteUri.users
+      : this.serverConfig.search.remoteUri.anonymous
   }
 
-  get showHelp () {
-    return this.hasSearch && this.newSearch && this.activeResult && this.activeResult.type === 'search-global' || false
+  onSearchChange () {
+    this.computeTypeahead()
   }
 
-  get URIPolicy (): 'only-followed' | 'any' {
-    return (
-      this.authService.isLoggedIn()
-        ? this.serverConfig.search.remoteUri.users
-        : this.serverConfig.search.remoteUri.anonymous
-    )
-      ? 'any'
-      : 'only-followed'
-  }
-
-  computeResults () {
-    this.newSearch = true
-    let results: Result[] = []
-
-    if (this.hasSearch) {
-      results = [
-        /* Channel search is still unimplemented. Uncomment when it is.
-        {
-          text: this.searchInput.value,
-          type: 'search-channel'
-        },
-        */
-        {
-          text: this.searchInput.value,
-          type: 'search-instance',
-          default: true
-        },
-        /* Global search is still unimplemented. Uncomment when it is.
-        {
-          text: this.searchInput.value,
-          type: 'search-global'
-        },
-        */
-        ...results
-      ]
+  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')
-        return true
-      }
+    this.updateItemsState(activeIndex)
+
+    this.keyboardEventsManager.change.subscribe(
+      _ => this.updateItemsState()
     )
   }
 
-  setEventItems (event: { items: QueryList<SuggestionComponent>, 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<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()
+  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
+    }
+  }
+
+  onSuggestionClicked (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
+        break
+
+      case 'Enter':
+        event.stopPropagation()
         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.searchInput.value })
+    if (!searchTarget) {
+      searchTarget = this.buildSearchTarget(this.keyboardEventsManager.activeItem.result)
+    }
+
+    Object.assign(queryParams, { search: this.search, searchTarget })
 
     const o = this.authService.isLoggedIn()
       ? this.loadUserLanguagesIfNeeded(queryParams)
@@ -197,7 +204,7 @@ export class SearchTypeaheadComponent implements OnInit, OnDestroy, AfterViewIni
   }
 
   private loadUserLanguagesIfNeeded (queryParams: any) {
-    if (queryParams && queryParams.languageOneOf) return of(queryParams)
+    if (queryParams?.languageOneOf) return of(queryParams)
 
     return this.authService.userInformationLoaded
                .pipe(
@@ -205,4 +212,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'
+  }
 }