12 files changed, 505 insertions, 111 deletions

diff --git a/client/src/app/header/header.component.html b/client/src/app/header/header.component.html
index 4fd18f9bd..49e219187 100644
--- a/client/src/app/header/header.component.html
+++ b/client/src/app/header/header.component.html
@@ -1,8 +1,4 @@
-<input
-  type="text" id="search-video" name="search-video" [attr.aria-label]="ariaLabelTextForSearch" i18n-placeholder placeholder="Search videos, channels…"
-  [(ngModel)]="searchValue" (keyup.enter)="doSearch()"
->
-<span (click)="doSearch()" class="icon icon-search"></span>
+<my-search-typeahead class="w-100 d-flex justify-content-end"></my-search-typeahead>
 
 <a class="upload-button" routerLink="/videos/upload">
   <my-global-icon iconName="upload"></my-global-icon>
diff --git a/client/src/app/header/header.component.scss b/client/src/app/header/header.component.scss
index 2bbde74bc..91b390773 100644
--- a/client/src/app/header/header.component.scss
+++ b/client/src/app/header/header.component.scss
@@ -1,51 +1,8 @@
 @import '_variables';
 @import '_mixins';
 
-#search-video {
-  @include peertube-input-text($search-input-width);
-  padding-left: 10px;
+my-search-typeahead {
   margin-right: 15px;
-  padding-right: 40px; // For the search icon
-  font-size: 14px;
-
-  transition: box-shadow .3s ease;
-
-  /* light border style */
-  border: 1px solid var(--mainBackgroundColor);
-  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 20px 0px;
-
-  &:focus {
-    box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 20px 0px;
-  }
-
-  &::placeholder {
-    color: var(--inputPlaceholderColor);
-  }
-
-  &:focus::placeholder {
-    opacity: 0 !important;
-  }
-
-  @media screen and (max-width: 800px) {
-    width: calc(100% - 150px);
-  }
-
-  @media screen and (max-width: 600px) {
-    width: calc(100% - 70px);
-  }
-}
-
-.icon.icon-search {
-  @include icon(25px);
-  height: 21px;
-
-  background-color: var(--mainForegroundColor);
-  mask: url('../../assets/images/header/search.svg') no-repeat 50% 50%;
-
-  // yolo
-  position: absolute;
-  margin-left: -50px;
-  margin-top: 5px;
 }
 
 .upload-button {
@@ -56,10 +13,6 @@
   color: var(--mainBackgroundColor) !important;
   margin-right: 25px;
 
-  @media screen and (max-width: 800px) {
-    margin-right: 0;
-  }
-
   @media screen and (max-width: 600px) {
     margin-right: 10px;
     padding: 0 10px;
diff --git a/client/src/app/header/header.component.ts b/client/src/app/header/header.component.ts
index 92a7eded6..cce76b0d1 100644
--- a/client/src/app/header/header.component.ts
+++ b/client/src/app/header/header.component.ts
@@ -1,10 +1,4 @@
-import { filter, first, map, tap } from 'rxjs/operators'
-import { Component, OnInit } from '@angular/core'
-import { ActivatedRoute, NavigationEnd, Params, Router } from '@angular/router'
-import { getParameterByName } from '../shared/misc/utils'
-import { AuthService, Notifier, ServerService } from '@app/core'
-import { of } from 'rxjs'
-import { I18n } from '@ngx-translate/i18n-polyfill'
+import { Component } from '@angular/core'
 
 @Component({
   selector: 'my-header',
@@ -12,54 +6,4 @@ import { I18n } from '@ngx-translate/i18n-polyfill'
   styleUrls: [ './header.component.scss' ]
 })
 
-export class HeaderComponent implements OnInit {
-  searchValue = ''
-  ariaLabelTextForSearch = ''
-
-  constructor (
-    private router: Router,
-    private route: ActivatedRoute,
-    private auth: AuthService,
-    private serverService: ServerService,
-    private authService: AuthService,
-    private notifier: Notifier,
-    private i18n: I18n
-  ) {}
-
-  ngOnInit () {
-    this.ariaLabelTextForSearch = this.i18n('Search videos, channels')
-
-    this.router.events
-        .pipe(
-          filter(e => e instanceof NavigationEnd),
-          map(() => getParameterByName('search', window.location.href))
-        )
-        .subscribe(searchQuery => this.searchValue = searchQuery || '')
-  }
-
-  doSearch () {
-    const queryParams: Params = {}
-
-    if (window.location.pathname === '/search' && this.route.snapshot.queryParams) {
-      Object.assign(queryParams, this.route.snapshot.queryParams)
-    }
-
-    Object.assign(queryParams, { search: this.searchValue })
-
-    const o = this.auth.isLoggedIn()
-      ? this.loadUserLanguagesIfNeeded(queryParams)
-      : of(true)
-
-    o.subscribe(() => this.router.navigate([ '/search' ], { queryParams }))
-  }
-
-  private loadUserLanguagesIfNeeded (queryParams: any) {
-    if (queryParams && queryParams.languageOneOf) return of(queryParams)
-
-    return this.auth.userInformationLoaded
-               .pipe(
-                 first(),
-                 tap(() => Object.assign(queryParams, { languageOneOf: this.auth.getUser().videoLanguages }))
-               )
-  }
-}
+export class HeaderComponent {}
diff --git a/client/src/app/header/index.ts b/client/src/app/header/index.ts
index d98d2d00a..a882d4d1f 100644
--- a/client/src/app/header/index.ts
+++ b/client/src/app/header/index.ts
@@ -1 +1,4 @@
 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
new file mode 100644
index 000000000..710268664
--- /dev/null
+++ b/client/src/app/header/search-typeahead.component.html
@@ -0,0 +1,53 @@
+<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()"
+  >
+  <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>
+
+    <!-- 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>
+        <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>
+
+    <!-- search instructions, when search input is empty -->
+    <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>
+        </div>
+      </div>
+      <ul>
+        <li>
+          <em>@channel_id@domain</em> <span class="flex-auto text-muted" i18n>channel</span>
+        </li>
+        <li>
+          <em>URL</em> <span class="text-muted" i18n>channel</span>
+        </li>
+        <li>
+          <em>UUID</em> <span class="text-muted" i18n>video</span>
+        </li>
+      </ul>
+      <span class="text-muted" i18n>Any other text will return matching video or channel names.</span>
+    </div>
+  </div>
+
+</div>
diff --git a/client/src/app/header/search-typeahead.component.scss b/client/src/app/header/search-typeahead.component.scss
new file mode 100644
index 000000000..33b88825f
--- /dev/null
+++ b/client/src/app/header/search-typeahead.component.scss
@@ -0,0 +1,145 @@
+@import '_mixins';
+@import '_variables';
+@import '_bootstrap-variables';
+@import '~bootstrap/scss/mixins/_breakpoints';
+
+#search-video {
+  @include peertube-input-text($search-input-width);
+  padding-left: 10px;
+  padding-right: 40px; // For the search icon
+  font-size: 14px;
+
+  &::placeholder {
+    color: var(--inputPlaceholderColor);
+  }
+}
+
+.icon.icon-search {
+  @include icon(25px);
+  height: 21px;
+
+  background-color: var(--mainForegroundColor);
+  mask: url('../../assets/images/header/search.svg') no-repeat 50% 50%;
+
+  // yolo
+  position: absolute;
+  margin-left: -35px;
+  margin-top: 5px;
+}
+
+.jump-to-suggestions {
+  top: 100%;
+  left: 0;
+  z-index: z(typeahead);
+  width: 100%;
+}
+
+#typeahead-help,
+#typeahead-instructions,
+my-suggestions ::ng-deep ul {
+  border: 1px solid var(--mainBackgroundColor);
+  border-bottom-right-radius: 3px;
+  border-bottom-left-radius: 3px;
+  background: var(--mainBackgroundColor);
+  transition: .3s ease;
+  transition-property: box-shadow;
+}
+
+#typeahead-help,
+#typeahead-instructions {
+  margin-top: 10px;
+  width: 100%;
+  padding: .5rem 1rem;
+  white-space: normal;
+
+  ul {
+    list-style: none;
+    padding: 0;
+    margin-bottom: .5rem;
+
+    em {
+      font-weight: 600;
+      margin-right: 0.2rem;
+      font-style: normal;
+    }
+  }
+}
+
+#typeahead-container {
+  input {
+    border: 1px solid var(--mainBackgroundColor) !important;
+    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 20px 0px;
+    flex-grow: 1;
+    transition: box-shadow .3s ease, width .2s ease;
+  }
+
+  @media screen and (min-width: $mobile-view) {
+    margin-left: 10px;
+  }
+
+  @media screen and (max-width: $small-view) {
+    flex: 1;
+
+    input {
+      width: unset;
+    }
+  }
+
+  span {
+    right: 10px;
+  }
+
+  & > div:last-child {
+    // we have to switch the display and not the opacity, 
+    // to avoid clashing with the rest of the interface.
+    display: none;
+  }
+
+  &:focus,
+  ::ng-deep &:focus-within {
+    & > div:last-child {
+      @media screen and (min-width: $mobile-view) {
+        display: initial !important;
+      }
+      
+      #typeahead-help,
+      #typeahead-instructions,
+      my-suggestions ::ng-deep ul {
+        box-shadow: rgba(0, 0, 0, 0.2) 0px 10px 20px -5px;
+      }
+    }
+
+    ::ng-deep input {
+      box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 20px 0px;
+      border-end-start-radius: 0;
+      border-end-end-radius: 0;
+
+      @include media-breakpoint-up(lg) {
+        width: 500px;
+      }
+    }
+  }
+}
+
+.glyphicon {
+  top: 3px;
+}
+
+.advanced-search-status {
+  height: max-content;
+  cursor: default;
+
+  &.c-help {
+    cursor: help;
+  }
+}
+
+.small-title {
+  @include in-content-small-title;
+
+  margin-bottom: .5rem;
+}
+
+::ng-deep my-suggestion {
+  width: 100%;
+}
diff --git a/client/src/app/header/search-typeahead.component.ts b/client/src/app/header/search-typeahead.component.ts
new file mode 100644
index 000000000..2bf1072f4
--- /dev/null
+++ b/client/src/app/header/search-typeahead.component.ts
@@ -0,0 +1,179 @@
+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 { Result, SuggestionComponent } from './suggestion.component'
+import { of } from 'rxjs'
+import { ServerConfig } from '@shared/models'
+
+@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>
+
+  hasChannel = false
+  inChannel = false
+  newSearch = true
+
+  search = ''
+  serverConfig: ServerConfig
+
+  inThisChannelText: string
+
+  keyboardEventsManager: ListKeyManager<SuggestionComponent>
+  results: Result[] = []
+
+  constructor (
+    private authService: AuthService,
+    private router: Router,
+    private route: ActivatedRoute,
+    private serverService: ServerService
+  ) {}
+
+  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)
+  }
+
+  ngOnDestroy () {
+    if (this.keyboardEventsManager) this.keyboardEventsManager.change.unsubscribe()
+  }
+
+  get activeResult () {
+    return this.keyboardEventsManager?.activeItem?.result
+  }
+
+  get areInstructionsDisplayed () {
+    return !this.search
+  }
+
+  get showHelp () {
+    return this.search && this.newSearch && this.activeResult?.type === 'search-global'
+  }
+
+  get 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.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
+      }
+    )
+  }
+
+  setEventItems (event: { items: QueryList<SuggestionComponent>, index?: number }) {
+    event.items.forEach(e => {
+      if (this.keyboardEventsManager.activeItem && this.keyboardEventsManager.activeItem === e) {
+        this.keyboardEventsManager.activeItem.active = true
+      } else {
+        e.active = false
+      }
+    })
+  }
+
+  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)
+    )
+  }
+
+  handleKey (event: KeyboardEvent) {
+    event.stopImmediatePropagation()
+    if (!this.keyboardEventsManager) return
+
+    switch (event.key) {
+      case 'ArrowDown':
+      case 'ArrowUp':
+        this.keyboardEventsManager.onKeydown(event)
+        break
+    }
+  }
+
+  isOnSearch () {
+    return window.location.pathname === '/search'
+  }
+
+  doSearch () {
+    this.newSearch = false
+    const queryParams: Params = {}
+
+    if (this.isOnSearch() && this.route.snapshot.queryParams) {
+      Object.assign(queryParams, this.route.snapshot.queryParams)
+    }
+
+    Object.assign(queryParams, { search: this.search })
+
+    const o = this.authService.isLoggedIn()
+      ? this.loadUserLanguagesIfNeeded(queryParams)
+      : of(true)
+
+    o.subscribe(() => this.router.navigate([ '/search' ], { queryParams }))
+  }
+
+  private loadUserLanguagesIfNeeded (queryParams: any) {
+    if (queryParams && queryParams.languageOneOf) return of(queryParams)
+
+    return this.authService.userInformationLoaded
+               .pipe(
+                 first(),
+                 tap(() => Object.assign(queryParams, { languageOneOf: this.authService.getUser().videoLanguages }))
+               )
+  }
+}
diff --git a/client/src/app/header/suggestion.component.html b/client/src/app/header/suggestion.component.html
new file mode 100644
index 000000000..d7ae3450a
--- /dev/null
+++ b/client/src/app/header/suggestion.component.html
@@ -0,0 +1,22 @@
+<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>
+  </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 *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>
+    <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>
+  </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
diff --git a/client/src/app/header/suggestion.component.scss b/client/src/app/header/suggestion.component.scss
new file mode 100644
index 000000000..1de2f43bd
--- /dev/null
+++ b/client/src/app/header/suggestion.component.scss
@@ -0,0 +1,32 @@
+@import '_mixins';
+
+a {
+  @include disable-default-a-behaviour;
+  width: 100%;
+
+  &, &:hover {
+    color: var(--mainForegroundColor);
+
+    &.focus-visible {
+      background-color: var(--mainHoverColor);
+      color: var(--mainBackgroundColor);
+    }
+  }
+}
+
+.bg-gray {
+  background-color: var(--mainBackgroundColor);
+}
+
+.text-gray-light {
+  color: var(--mainForegroundColor);
+}
+
+my-global-icon {
+  width: 17px;
+  position: relative;
+  top: -2px;
+  margin: 5px;
+
+  @include apply-svg-color(var(--mainForegroundColor));
+}
diff --git a/client/src/app/header/suggestion.component.ts b/client/src/app/header/suggestion.component.ts
new file mode 100644
index 000000000..69641b511
--- /dev/null
+++ b/client/src/app/header/suggestion.component.ts
@@ -0,0 +1,37 @@
+import { Input, Component, Output, EventEmitter, OnInit, ChangeDetectionStrategy } from '@angular/core'
+import { RouterLink } from '@angular/router'
+import { ListKeyManagerOption } from '@angular/cdk/a11y'
+
+export type Result = {
+  text: string
+  type: 'channel' | 'suggestion' | 'search-channel' | 'search-instance' | 'search-global' | 'search-any'
+  routerLink?: RouterLink,
+  default?: boolean
+}
+
+@Component({
+  selector: 'my-suggestion',
+  templateUrl: './suggestion.component.html',
+  styleUrls: [ './suggestion.component.scss' ],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class SuggestionComponent implements OnInit, ListKeyManagerOption {
+  @Input() result: Result
+  @Input() highlight: string
+  @Output() selected = new EventEmitter()
+
+  disabled = false
+  active = false
+
+  getLabel () {
+    return this.result.text
+  }
+
+  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
new file mode 100644
index 000000000..8d017d78d
--- /dev/null
+++ b/client/src/app/header/suggestions.component.html
@@ -0,0 +1,6 @@
+<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
new file mode 100644
index 000000000..ee3ef73c2
--- /dev/null
+++ b/client/src/app/header/suggestions.component.ts
@@ -0,0 +1,24 @@
+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 })
+  }
+}