Simplify code for search-typeahead

client/src/app/header/search-typeahead.component.html

@@ -24,14 +24,14 @@
     </div>
 
     <!-- search instructions, when search input is empty -->
-    <div *ngIf="showInstructions" 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]="anyURI ? '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 [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="anyURI" class="mr-1" i18n>any instance</span>
+            <span *ngIf="canSearchAnyURI" class="mr-1" i18n>any instance</span>
-            <span *ngIf="!anyURI" class="mr-1" i18n>only followed instances</span>
+            <span *ngIf="!canSearchAnyURI" class="mr-1" i18n>only followed instances</span>
-            <i [ngClass]="anyURI ? 'glyphicon glyphicon-ok-sign' : 'glyphicon glyphicon-exclamation-sign'"></i>
+            <i [ngClass]="canSearchAnyURI ? 'glyphicon glyphicon-ok-sign' : 'glyphicon glyphicon-exclamation-sign'"></i>
           </span>
         </div>
       </div>

client/src/app/header/search-typeahead.component.ts

@@ -1,6 +1,5 @@
 import {
   Component,
-  AfterViewInit,
   OnInit,
   OnDestroy,
   QueryList,
@@ -14,7 +13,6 @@ 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'
 
 @Component({
@@ -22,7 +20,7 @@ import { ServerConfig } from '@shared/models'
   templateUrl: './search-typeahead.component.html',
   styleUrls: [ './search-typeahead.component.scss' ]
 })
-export class SearchTypeaheadComponent implements OnInit, OnDestroy, AfterViewInit {
+export class SearchTypeaheadComponent implements OnInit, OnDestroy {
   @ViewChild('searchVideo', { static: true }) searchInput: ElementRef<HTMLInputElement>
 
   hasChannel = false
@@ -35,7 +33,7 @@ export class SearchTypeaheadComponent implements OnInit, OnDestroy, AfterViewIni
   inThisChannelText: string
 
   keyboardEventsManager: ListKeyManager<SuggestionComponent>
-  results: any[] = []
+  results: Result[] = []
 
   constructor (
     private authService: AuthService,
@@ -45,6 +43,9 @@ export class SearchTypeaheadComponent implements OnInit, OnDestroy, AfterViewIni
   ) {}
 
   ngOnInit () {
+    const query = this.route.snapshot.queryParams
+    if (query['search']) this.search = query['search']
+
     this.serverService.getConfig()
       .subscribe(config => this.serverConfig = config)
   }
@@ -53,23 +54,19 @@ export class SearchTypeaheadComponent implements OnInit, OnDestroy, AfterViewIni
     if (this.keyboardEventsManager) this.keyboardEventsManager.change.unsubscribe()
   }
 
-  ngAfterViewInit () {
-    this.search = getParameterByName('search', window.location.href) || ''
-  }
-
   get activeResult () {
-    return this.keyboardEventsManager && this.keyboardEventsManager.activeItem && this.keyboardEventsManager.activeItem.result
+    return this.keyboardEventsManager?.activeItem?.result
   }
 
-  get showInstructions () {
+  get areInstructionsDisplayed () {
     return !this.search
   }
 
   get showHelp () {
-    return this.search && this.newSearch && this.activeResult && this.activeResult.type === 'search-global' || false
+    return this.search && this.newSearch && this.activeResult?.type === 'search-global'
   }
 
-  get anyURI () {
+  get canSearchAnyURI () {
     if (!this.serverConfig) return false
     return this.authService.isLoggedIn()
       ? this.serverConfig.search.remoteUri.users
@@ -131,28 +128,33 @@ export class SearchTypeaheadComponent implements OnInit, OnDestroy, AfterViewIni
 
   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)
     )
   }
 
-  handleKeyUp (event: KeyboardEvent, indexSelected?: number) {
+  handleKeyUp (event: KeyboardEvent) {
     event.stopImmediatePropagation()
-    if (this.keyboardEventsManager) {
+    if (!this.keyboardEventsManager) return
-      if (event.keyCode === DOWN_ARROW || event.keyCode === UP_ARROW) {
+    
+    switch (event.key) {
+      case "ArrowDown":
+      case "ArrowUp":
         this.keyboardEventsManager.onKeydown(event)
-        return false
+        break
-      } else if (event.keyCode === ENTER) {
+      case "Enter":
         this.newSearch = false
         this.doSearch()
-        return false
+        break
-      }
     }
   }
 

client/src/app/header/suggestion.component.html

@@ -1,4 +1,4 @@
-<a tabindex="-1" class="d-flex flex-auto flex-items-center p-2" [class.focus-visible]="active" [routerLink]="result.routerLink">
+<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>

client/src/app/shared/angular/highlight.pipe.ts

@@ -30,7 +30,7 @@ export class HighlightPipe implements PipeTransform {
           break
         }
         case 'Single-And-StartsWith-Match': {
-          regex = new RegExp("^" + stringToHighlight, caseFlag)
+          regex = new RegExp('^' + stringToHighlight, caseFlag)
           break
         }
         case 'Multi-Match': {

client/src/app/shared/shared.module.ts

@@ -89,7 +89,7 @@ import { NumberFormatterPipe } from '@app/shared/angular/number-formatter.pipe'
 import { VideoDurationPipe } from '@app/shared/angular/video-duration-formatter.pipe'
 import { ObjectLengthPipe } from '@app/shared/angular/object-length.pipe'
 import { FromNowPipe } from '@app/shared/angular/from-now.pipe'
-import { HighlightPipe }from '@app/shared/angular/highlight.pipe'
+import { HighlightPipe } from '@app/shared/angular/highlight.pipe'
 import { PeerTubeTemplateDirective } from '@app/shared/angular/peertube-template.directive'
 import { VideoActionsDropdownComponent } from '@app/shared/video/video-actions-dropdown.component'
 import { VideoBlacklistComponent } from '@app/shared/video/modals/video-blacklist.component'