First implem global search

8 files changed, 165 insertions, 154 deletions

diff --git a/client/src/app/header/index.ts b/client/src/app/header/index.ts
index a882d4d1f..005e0c97d 100644
--- a/client/src/app/header/index.ts
+++ b/client/src/app/header/index.ts
@@ -1,4 +1,3 @@
 export * from './header.component'
 export * from './search-typeahead.component'
-export * from './suggestions.component'
 export * from './suggestion.component'
diff --git a/client/src/app/header/search-typeahead.component.html b/client/src/app/header/search-typeahead.component.html
index bbf3834c5..4355b67af 100644
--- a/client/src/app/header/search-typeahead.component.html
+++ b/client/src/app/header/search-typeahead.component.html
@@ -1,38 +1,43 @@
 <div class="d-inline-flex position-relative" id="typeahead-container">
   <input
     type="text" id="search-video" name="search-video" #searchVideo i18n-placeholder placeholder="Search videos, channels…"
-    [(ngModel)]="search" (ngModelChange)="onSearchChange()" (keyup)="handleKey($event)" (keydown.enter)="doSearch()"
-    aria-label="Search"
+    [(ngModel)]="search" (ngModelChange)="onSearchChange()" (keydown)="handleKey($event)" (keydown.enter)="doSearch()"
+    aria-label="Search" autocomplete="off"
   >
   <span class="icon icon-search" (click)="doSearch()"></span>
 
   <div class="position-absolute jump-to-suggestions">
-    <!-- suggestions -->
-    <my-suggestions *ngIf="search && newSearch" [results]="results" [highlight]="search" (init)="initKeyboardEventsManager($event)"></my-suggestions>
+
+    <ul [hidden]="!search || !areSuggestionsOpened" role="listbox" class="p-0 m-0">
+      <li
+        *ngFor="let result of results; let i = index" class="suggestion d-flex flex-justify-start flex-items-center p-0 f5"
+        role="option" aria-selected="true" (mouseenter)="onSuggestionHover(i)" (click)="onSuggestionlicked(result)"
+      >
+        <my-suggestion [result]="result" [highlight]="search"></my-suggestion>
+      </li>
+    </ul>
 
     <!-- suggestion help, not shown until one of the suggestions is selected and specific to that suggestion -->
-    <div *ngIf="showHelp" id="typeahead-help" class="overflow-hidden">
-      <ng-container *ngIf="activeResult.type === 'search-global'">
-        <div class="d-flex justify-content-between">
-          <label class="small-title" i18n>GLOBAL SEARCH</label>
-          <div class="advanced-search-status text-muted">
-            <span *ngIf="serverConfig" class="mr-1" i18n>using {{ serverConfig.followings.instance.autoFollowIndex.indexUrl }}</span>
-            <i class="glyphicon glyphicon-globe"></i>
-          </div>
+    <div *ngIf="showSearchGlobalHelp()" id="typeahead-help" class="overflow-hidden">
+      <div class="d-flex justify-content-between">
+        <label class="small-title" i18n>GLOBAL SEARCH</label>
+        <div class="advanced-search-status text-muted">
+          <span *ngIf="serverConfig" class="mr-1" i18n>using {{ serverConfig.search.searchIndex.url }}</span>
+          <i class="glyphicon glyphicon-globe"></i>
         </div>
-        <div class="text-muted" i18n>Results will be augmented with those of a third-party index. Only data necessary to make the query will be sent.</div>
-      </ng-container>
+      </div>
+      <div class="text-muted" i18n>Results will be augmented with those of a third-party index. Only data necessary to make the query will be sent.</div>
     </div>
 
     <!-- search instructions, when search input is empty -->
-    <div *ngIf="areInstructionsDisplayed" id="typeahead-instructions" class="overflow-hidden">
+    <div *ngIf="areInstructionsDisplayed()" id="typeahead-instructions" class="overflow-hidden">
       <div class="d-flex justify-content-between">
         <label class="small-title" i18n>ADVANCED SEARCH</label>
         <div class="advanced-search-status c-help">
           <span [ngClass]="canSearchAnyURI ? 'text-success' : 'text-muted'" i18n-title title="Determines whether you can resolve any distant content, or if this instance only allows doing so for instances it follows.">
-            <span *ngIf="canSearchAnyURI" class="mr-1" i18n>any instance</span>
-            <span *ngIf="!canSearchAnyURI" class="mr-1" i18n>only followed instances</span>
-            <i [ngClass]="canSearchAnyURI ? 'glyphicon glyphicon-ok-sign' : 'glyphicon glyphicon-exclamation-sign'"></i>
+            <span *ngIf="canSearchAnyURI()" class="mr-1" i18n>any instance</span>
+            <span *ngIf="!canSearchAnyURI()" class="mr-1" i18n>only followed instances</span>
+            <i [ngClass]="canSearchAnyURI() ? 'glyphicon glyphicon-ok-sign' : 'glyphicon glyphicon-exclamation-sign'"></i>
           </span>
         </div>
       </div>
diff --git a/client/src/app/header/search-typeahead.component.scss b/client/src/app/header/search-typeahead.component.scss
index 0a30ebd55..4b56fd93a 100644
--- a/client/src/app/header/search-typeahead.component.scss
+++ b/client/src/app/header/search-typeahead.component.scss
@@ -36,7 +36,7 @@
 
 #typeahead-help,
 #typeahead-instructions,
-my-suggestions ::ng-deep ul {
+li.suggestion {
   border: 1px solid pvar(--mainBackgroundColor);
   border-bottom-right-radius: 3px;
   border-bottom-left-radius: 3px;
@@ -90,7 +90,7 @@ my-suggestions ::ng-deep ul {
   }
 
   & > div:last-child {
-    // we have to switch the display and not the opacity, 
+    // we have to switch the display and not the opacity,
     // to avoid clashing with the rest of the interface.
     display: none;
   }
@@ -101,10 +101,10 @@ my-suggestions ::ng-deep ul {
       @media screen and (min-width: $mobile-view) {
         display: initial !important;
       }
-      
+
       #typeahead-help,
       #typeahead-instructions,
-      my-suggestions ::ng-deep ul {
+      li.suggestion {
         box-shadow: rgba(0, 0, 0, 0.2) 0px 10px 20px -5px;
       }
     }
diff --git a/client/src/app/header/search-typeahead.component.ts b/client/src/app/header/search-typeahead.component.ts
index 2bf1072f4..6c8b8efee 100644
--- a/client/src/app/header/search-typeahead.component.ts
+++ b/client/src/app/header/search-typeahead.component.ts
@@ -1,23 +1,24 @@
-import { Component, ElementRef, OnDestroy, OnInit, QueryList, ViewChild } from '@angular/core'
+import { of } from 'rxjs'
+import { first, tap, delay } from 'rxjs/operators'
+import { ListKeyManager } from '@angular/cdk/a11y'
+import { AfterViewInit, Component, ElementRef, OnDestroy, OnInit, QueryList, ViewChild, ViewChildren, AfterViewChecked } 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 { Result, SuggestionComponent } from './suggestion.component'
-import { of } from 'rxjs'
 import { ServerConfig } from '@shared/models'
+import { SearchTargetType } from '@shared/models/search/search-target-query.model'
+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 {
-  @ViewChild('searchVideo', { static: true }) searchInput: ElementRef<HTMLInputElement>
+export class SearchTypeaheadComponent implements OnInit, AfterViewInit, AfterViewChecked, OnDestroy {
+  @ViewChildren(SuggestionComponent) suggestionItems: QueryList<SuggestionComponent>
 
   hasChannel = false
   inChannel = false
-  newSearch = true
+  areSuggestionsOpened = true
 
   search = ''
   serverConfig: ServerConfig
@@ -25,7 +26,11 @@ export class SearchTypeaheadComponent implements OnInit, OnDestroy {
   inThisChannelText: string
 
   keyboardEventsManager: ListKeyManager<SuggestionComponent>
-  results: Result[] = []
+  results: SuggestionPayload[] = []
+
+  activeSearch: SuggestionPayloadType
+
+  private scheduleKeyboardEventsInit = false
 
   constructor (
     private authService: AuthService,
@@ -38,109 +43,138 @@ export class SearchTypeaheadComponent implements OnInit, OnDestroy {
     this.route.queryParams
       .pipe(first(params => this.isOnSearch() && params.search !== undefined && params.search !== null))
       .subscribe(params => this.search = params.search)
+  }
+
+  ngAfterViewInit () {
     this.serverService.getConfig()
-      .subscribe(config => this.serverConfig = config)
+      .subscribe(config => {
+        this.serverConfig = config
+
+        this.computeTypeahead()
+
+        this.serverService.configReloaded
+          .subscribe(config => {
+            this.serverConfig = config
+            this.computeTypeahead()
+          })
+      })
   }
 
-  ngOnDestroy () {
-    if (this.keyboardEventsManager) this.keyboardEventsManager.change.unsubscribe()
+  ngAfterViewChecked () {
+    if (this.scheduleKeyboardEventsInit && !this.keyboardEventsManager) {
+      // Avoid ExpressionChangedAfterItHasBeenCheckedError errors
+      setTimeout(() => this.initKeyboardEventsManager(), 0)
+    }
   }
 
-  get activeResult () {
-    return this.keyboardEventsManager?.activeItem?.result
+  ngOnDestroy () {
+    if (this.keyboardEventsManager) this.keyboardEventsManager.change.unsubscribe()
   }
 
-  get areInstructionsDisplayed () {
+  areInstructionsDisplayed () {
     return !this.search
   }
 
-  get showHelp () {
-    return this.search && this.newSearch && this.activeResult?.type === 'search-global'
+  showSearchGlobalHelp () {
+    return this.search && this.areSuggestionsOpened && this.keyboardEventsManager?.activeItem?.result?.type === 'search-index'
   }
 
-  get canSearchAnyURI () {
+  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<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) {
+        this.activeSearch = 'search-instance'
       } else {
-        e.active = false
+        this.activeSearch = 'search-index'
       }
-    })
+    }
+
+    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()
+  updateItemsState (index?: number) {
+    if (index !== undefined) {
+      this.keyboardEventsManager.setActiveItem(index)
+    }
 
-    this.keyboardEventsManager = new ListKeyManager(event.items)
+    for (const item of this.suggestionItems) {
+      if (this.keyboardEventsManager.activeItem && this.keyboardEventsManager.activeItem === item) {
+        item.active = true
+        this.activeSearch = item.result.type
+        continue
+      }
 
-    if (event.index !== undefined) {
-      this.keyboardEventsManager.setActiveItem(event.index)
-    } else {
-      this.keyboardEventsManager.setFirstItemActive()
+      item.active = false
     }
+  }
 
-    this.keyboardEventsManager.change.subscribe(
-      _ => this.setEventItems(event)
-    )
+  onSuggestionlicked (payload: SuggestionPayload) {
+    this.doSearch(this.buildSearchTarget(payload))
+  }
+
+  onSuggestionHover (index: number) {
+    this.updateItemsState(index)
   }
 
   handleKey (event: KeyboardEvent) {
-    event.stopImmediatePropagation()
     if (!this.keyboardEventsManager) return
 
     switch (event.key) {
       case 'ArrowDown':
       case 'ArrowUp':
+        event.stopPropagation()
+
         this.keyboardEventsManager.onKeydown(event)
         break
     }
@@ -150,15 +184,19 @@ export class SearchTypeaheadComponent implements OnInit, OnDestroy {
     return window.location.pathname === '/search'
   }
 
-  doSearch () {
-    this.newSearch = false
+  doSearch (searchTarget?: SearchTargetType) {
+    this.areSuggestionsOpened = false
     const queryParams: Params = {}
 
     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)
@@ -176,4 +214,12 @@ export class SearchTypeaheadComponent implements OnInit, OnDestroy {
                  tap(() => Object.assign(queryParams, { languageOneOf: this.authService.getUser().videoLanguages }))
                )
   }
+
+  private buildSearchTarget (result: SuggestionPayload): SearchTargetType {
+    if (result.type === 'search-index') {
+      return 'search-index'
+    }
+
+    return 'local'
+  }
 }
diff --git a/client/src/app/header/suggestion.component.html b/client/src/app/header/suggestion.component.html
index d7ae3450a..ab4b4b678 100644
--- a/client/src/app/header/suggestion.component.html
+++ b/client/src/app/header/suggestion.component.html
@@ -1,22 +1,17 @@
 <a tabindex="-1" class="d-flex flex-auto flex-items-center p-2" [class.focus-visible]="active">
   <div class="flex-shrink-0 mr-2 text-center">
-    <my-global-icon *ngIf="result.type !== 'channel'" iconName="search"></my-global-icon>
-    <my-global-icon *ngIf="result.type === 'channel'" iconName="folder"></my-global-icon>
+    <my-global-icon iconName="search"></my-global-icon>
   </div>
 
   <img class="avatar mr-2 flex-shrink-0 d-none" alt="" aria-label="Team" src="" width="28" height="28">
 
-  <div class="flex-auto overflow-hidden text-left no-wrap css-truncate css-truncate-target" [attr.aria-label]="result.text" [innerHTML]="result.text | highlight : highlight"></div>
+  <div
+    class="flex-auto overflow-hidden text-left no-wrap css-truncate css-truncate-target"
+    [attr.aria-label]="result.text" [innerHTML]="result.text | highlight : highlight"
+  ></div>
 
-  <div *ngIf="result.type !== 'channel' && result.type !== 'suggestion'" class="border rounded flex-shrink-0 px-1 bg-gray text-gray-light ml-1 f6">
-    <span *ngIf="result.type === 'search-channel'" i18n>In this channel</span>
+  <div class="border rounded flex-shrink-0 px-1 bg-gray text-gray-light ml-1 f6">
     <span *ngIf="result.type === 'search-instance'" i18n>In this instance</span>
-    <span *ngIf="result.type === 'search-global'" i18n>In the vidiverse</span>
-    <span *ngIf="result.type === 'search-any'" aria-hidden="true" class="d-inline-block ml-1 v-align-middle">↵</span>
+    <span *ngIf="result.type === 'search-index'" i18n>In the vidiverse</span>
   </div>
-
-  <div *ngIf="result.type === 'channel'" aria-hidden="true" class="border rounded flex-shrink-0 px-1 bg-gray text-gray-light ml-1 f6 d-on-nav-focus" i18n>
-    Jump to channel
-    <span class="d-inline-block ml-1 v-align-middle">↵</span>
-  </div>
-</a>
\ No newline at end of file
+</a>
diff --git a/client/src/app/header/suggestion.component.ts b/client/src/app/header/suggestion.component.ts
index 69641b511..250a5411e 100644
--- a/client/src/app/header/suggestion.component.ts
+++ b/client/src/app/header/suggestion.component.ts
@@ -1,24 +1,24 @@
-import { Input, Component, Output, EventEmitter, OnInit, ChangeDetectionStrategy } from '@angular/core'
+import { Input, Component, Output, EventEmitter, OnInit, ChangeDetectionStrategy, OnChanges } from '@angular/core'
 import { RouterLink } from '@angular/router'
 import { ListKeyManagerOption } from '@angular/cdk/a11y'
 
-export type Result = {
+export type SuggestionPayload = {
   text: string
-  type: 'channel' | 'suggestion' | 'search-channel' | 'search-instance' | 'search-global' | 'search-any'
-  routerLink?: RouterLink,
-  default?: boolean
+  type: SuggestionPayloadType
+  routerLink?: RouterLink
+  default: boolean
 }
 
+export type SuggestionPayloadType = 'search-instance' | 'search-index'
+
 @Component({
   selector: 'my-suggestion',
   templateUrl: './suggestion.component.html',
-  styleUrls: [ './suggestion.component.scss' ],
-  changeDetection: ChangeDetectionStrategy.OnPush
+  styleUrls: [ './suggestion.component.scss' ]
 })
 export class SuggestionComponent implements OnInit, ListKeyManagerOption {
-  @Input() result: Result
+  @Input() result: SuggestionPayload
   @Input() highlight: string
-  @Output() selected = new EventEmitter()
 
   disabled = false
   active = false
@@ -30,8 +30,4 @@ export class SuggestionComponent implements OnInit, ListKeyManagerOption {
   ngOnInit () {
     if (this.result.default) this.active = true
   }
-
-  selectItem () {
-    this.selected.emit(this.result)
-  }
 }
diff --git a/client/src/app/header/suggestions.component.html b/client/src/app/header/suggestions.component.html
deleted file mode 100644
index 8d017d78d..000000000
--- a/client/src/app/header/suggestions.component.html
+++ /dev/null
@@ -1,6 +0,0 @@
-<ul role="listbox" class="p-0 m-0">
-  <li *ngFor="let result of results; let i = index" class="d-flex flex-justify-start flex-items-center p-0 f5"
-      role="option" aria-selected="true" (mouseenter)="hoverItem(i)">
-    <my-suggestion [result]="result" [highlight]="highlight"></my-suggestion>
-  </li>
-</ul>
\ No newline at end of file
diff --git a/client/src/app/header/suggestions.component.ts b/client/src/app/header/suggestions.component.ts
deleted file mode 100644
index ee3ef73c2..000000000
--- a/client/src/app/header/suggestions.component.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { Input, QueryList, Component, Output, AfterViewInit, EventEmitter, ViewChildren, ChangeDetectionStrategy } from '@angular/core'
-import { SuggestionComponent } from './suggestion.component'
-
-@Component({
-  selector: 'my-suggestions',
-  templateUrl: './suggestions.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class SuggestionsComponent implements AfterViewInit {
-  @Input() results: any[]
-  @Input() highlight: string
-  @ViewChildren(SuggestionComponent) listItems: QueryList<SuggestionComponent>
-  @Output() init = new EventEmitter()
-
-  ngAfterViewInit () {
-    this.listItems.changes.subscribe(
-      _ => this.init.emit({ items: this.listItems })
-    )
-  }
-
-  hoverItem (index: number) {
-    this.init.emit({ items: this.listItems, index: index })
-  }
-}